All about Widgets

In Flutter, widgets are the building blocks of the user interface (UI). They represent the visual elements and layout structures that make up your app's UI. Everything you see on the screen in a Flutter app is a widget, whether it's a button, text, image, or even the entire app itself. Widgets can be combined and nested to create complex UI designs.

 

Scaffold

---

A Scaffold is a commonly used widget that provides a basic structure for creating the primary layout of an app's screen. It represents the fundamental visual elements that form the structure of a typical mobile app, including an app bar, body content, and optionally a bottom navigation bar or a floating action button (FAB).

Scaffold introduces many widgets for structuring UI applications. The widgets within a Scaffold, in turn, contain more widgets. These include (but are not limited to):

• BoxDecoration
• SizedBox
• Container
• Buttons
• Icon
• Transform
• Row
• Column
• TextStyle
• padding
• backgroundColor
• color
• text
• mainAxisAlignment
• crossAxisAlignment

Columns and Rows are especially useful because you can also have their own children of themselves to have an organized structure.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      	body: Column(
          children: [
          	Row(
              children: [
            	Column(
                  children: [
               	  	Text("Hi, John"),
                    Text("Welcome back"),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

---

 

Developer Tools

---

To check how the structure of a codebase, we can inspect using the widget inspector provided by the debug console.

---

 

VSCode Settings

---

The 'blue lines' that appear requires the code to be a constant. To fix this simply go to settings -> command palette -> input open user settings -> input the following code:

"editor.codeActionOnSave": {
  "source.fixAll": true
},

Additionally, inputting the following code will structure the code with lines which helps you to clearly see the structural relationship of the entire code.

"dart.previewFlutterUiGuides": true,

---

$nbsp;

Code Actions

---

Instead of trying to copy and paste a code in order to wrap it with another widget, we can click on the code we want to wrap something with, click on the lightbulb on the left, and choose an action.

---

 

Reusable Widgets

---

When we have repeating components, it is recommended to create a reusable widget instead of doing code duplication by either using the code action of extracting widgets or manually creating a separate file. Although the former is recommended, both methods organizes the codebase with more structure.

After extracting a widget and giving a name, we only need to use that name and the properties within it to apply flutter widgets.

NOTE: We can create constructors by extracting widgets.

// Example of an extracted widget
import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  final String text;
  final Color bgColor;
  final Color textColor;

  const Button({
    super.key,
    required this.text,
    required this.bgColor,
    required this.textColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: bgColor, borderRadius: BorderRadius.circular(45)),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 20,
          horizontal: 50,
        ),
        child: Text(
          text,
          style: TextStyle(
            color: textColor,
            fontSize: 20,
          ),
        ),
      ),
    );
  }
}

 

By applying various widgets, we can create something like this:

---