Flutter and Widget Concept

 

When learning Flutter, I think the first thing to do to grasp its general logic is to learn about widgets and their hierarchy. So in this article I wanted to talk about widgets and the widget tree in Flutter.

What is a Widget?

Widgets are the basic building blocks for creating the user interface in Flutter applications. Everything is a widget. A text box, a button, an image, even icons. Everything is represented as a widget in Flutter.

Widget Types

There are two types of widgets used in Flutter.

1. Stateless Widget

Stateless: Does not contain any state. That is, once created, the information it contains cannot be changed. The widget’s appearance depends on its initial properties and the widget itself does not change unless these properties change.

Build Method Only: Usually contains only the “build” method. This method specifies how the widget will be displayed.

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

In the example above, the text placed in appBar and body is written as immutable, so there is no state change here. StatelessWidget should be preferred because it does not need to be built again and again every time the application is refreshed.

2. Stateful Widget

Stateful: It can track the state thanks to a “State” object it contains. That is, after the widget is created, its state can change and these state changes are used to update the UI.

State Class: Stateful Widget is a class, but the actual state is contained in a separate “State” class. The “State” class contains the state of the widget and when it is updated, the “build” method is called again.

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Count Value: $_counter'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _incrementCounter,
                child: Text('Increase'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In this example, a State management is required in CounterApp. There is a counter operation and the value of this counter is initially displayed on the screen and when the “Increase” button is clicked, the value of the counter increases. In this example, the _CounterAppState class keeps track of state changes and displays the current value of the counter on the screen. This means that there are changes in the background and UI and this piece of code needs to be rebuilt every time the application is refreshed. This is why StatefulWidget should be used.

At the beginning of my learning process, while I was frequently making inquiries such as what is state, what does it mean to build, I thought the following. If we can’t decide which part of the application to use stateful and which part to use stateless, we can use stateful. Because stateless can’t do the operations of stateful, but stateful does everything :) You may have thought like this too. However, performance issues arise here.

Recommendations for Use

• If the appearance of a widget will not change after it is created and there is no need for status tracking, it may be more appropriate to use “Stateless Widget”.
• If a widget’s appearance will change depending on the data it contains or will change as a result of user interactions, it makes sense to use “Stateful Widget”.

Ideally, widgets should be as stateless as possible, because stateless widgets are usually simpler, lighter and more performant. Stateful one should only be used when necessary.

Widget Tree

In Flutter, widgets are organized in a tree structure, creating a hierarchy.

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - Column
        - Text
        - SizedBox
        - ElevatedButton

The widgets of the simple counter application above form a tree structure like this. This hierarchy shows how the widgets are embedded and related to each other. This is important for understanding how widgets are placed and interact with each other.

In conclusion, the Widget tree in Flutter is a fundamental concept used to build the interface of our application. Widgets are organized in a hierarchy and this tree structure determines the look and behavior of our app. I hope I have explained it in a simple way, I hope to be useful.

Thank you.

Selin.