Flutter Course: Widgets are LEGO Blocks!

Hello, everyone! Today, we will have an in-depth lecture on one of the fundamental concepts of Flutter, ‘widgets’. Widgets are the core elements that make up the app’s UI, allowing us to combine them like LEGO blocks to create various forms of user interfaces. In this article, we will explain the concept of widgets, types, usage, and examples in detail.

1. The Concept of Widgets

In Flutter, widgets are the basic building blocks of the UI. Everything in Flutter is made up of widgets, which describe both state and shape. A widget is an object that defines a part of the UI that is presented to the user. There are various forms ranging from simple buttons to complex containers, and everything can be represented as a widget.

1.1 Basic Understanding of Widgets

When building an app, we typically need various UI components. For example, buttons, text, images, and lists are all represented as individual widgets. These widgets combine through parent-child relationships to form more complex structures.

1.2 Similarity Between Widgets and LEGO Blocks

The reason we compare widgets to LEGO blocks is that they are independent and can be combined to create larger structures. Like LEGO blocks, each widget has various sizes and shapes and can be freely combined to create new forms. Additionally, it is very easy to replace or move widgets, making rapid experimentation and changes possible during the development process.

2. Types of Widgets

The widgets provided by Flutter can be broadly divided into two categories:

• Stateless Widget: A widget that does not hold any state and draws the UI based on the given information.
• Stateful Widget: A widget that holds state internally and the UI changes when the state is altered.

2.1 Stateless Widget: Example

class MyStatelessWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Text('Hello, Stateless Widget!');
      }
    }

As shown in the example above, the Stateless Widget defines what will be displayed on the screen through the build method. This Widget is immutable, meaning it does not change state after being created.

2.2 Stateful Widget: Example

class MyStatefulWidget extends StatefulWidget {
      @override
      _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
    }

    class _MyStatefulWidgetState extends State {
      int _counter = 0;

      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }

      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        );
      }
    }

A Stateful Widget can update its state through the setState method. In the example above, the counter increases every time the button is clicked.

3. The Tree Structure of Widgets

Flutter uses a tree structure of widgets to build the UI. Each widget has a parent widget and is interconnected with others. This allows for layout definitions and state management.

3.1 Composition of the Widget Tree

The widget tree consists of a root widget and its subordinate widgets. All widgets are connected in this tree structure through parent-child relationships. Each level of the tree represents different UI components.

3.2 Example of Tree Structure

void main() {
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Widget Tree Example'),
            ),
            body: Center(
              child: MyStatefulWidget(),
            ),
          ),
        );
      }
    }

In this example, the top-level widget MyApp creates a widget tree that includes other widgets. Scaffold, AppBar, and Center are distinct widgets that combine to create the screen.

4. Widgets as LEGO Blocks

The combinability of widgets is very powerful. Developers can reuse and combine widgets as needed to create new UIs. This combinability makes it possible to manage the complexity of an app.

4.1 Creating Custom Widgets

In Flutter, you can create custom widgets to generate unique UIs. This allows you to create reusable code blocks, making maintenance easier.

class CustomButton extends StatelessWidget {
      final String text;
      final Function onPressed;

      CustomButton({required this.text, required this.onPressed});

      @override
      Widget build(BuildContext context) {
        return ElevatedButton(
          onPressed: () => onPressed(),
          child: Text(text),
        );
      }
    }

In the example above, we created a custom widget called CustomButton. This widget accepts the desired text and a function to execute when clicked as parameters, allowing for easy creation of buttons with various texts.

4.2 Advantages of Widget Reusability

Reusing widgets can reduce code duplication and simplify maintenance. It allows for consistency in UI, making new development easier, which is particularly useful in team projects. Additionally, it simplifies complex UIs and enables independent testing and debugging of each component.

5. Conclusion

Today, we have explored the concept of widgets in Flutter and the design pattern likened to LEGO blocks. Widgets, as the basic elements that compose the UI, are independent and easily combinable, providing a powerful structure. This enables developers to efficiently manage complex UIs and build apps more conveniently.

Now you can freely combine widgets like LEGO blocks in Flutter to create amazing apps! In the next lecture, we will learn about layout composition in Flutter and various layout widgets. Thank you!