Flutter Course, 4.1 What is a Widget?

In the world of modern mobile application development, Flutter is loved by many developers for its flexibility and performance. The core component of Flutter, the widget, is the basic unit that composes the UI, and understanding it is essential to mastering Flutter. In this article, we will take a deep dive into what a Flutter widget is, its important concepts, and various uses.

1. Definition of Widgets

In Flutter, a ‘widget’ is the most basic element that composes the user interface. Widgets represent everything displayed on the screen, including text, buttons, images, and layouts. Because Flutter treats everything as a widget, developers can construct every part of the UI as a widget. These widgets can combine with other widgets to create complex UIs.

2. Types of Widgets

2.1 Stateless Widget

A stateless widget defines a part of the user interface but does not store state. In other words, this widget draws the screen based on immutable data. For example, widgets such as `Text`, `Icon`, and `RaisedButton` fall into this category. Stateless widgets allow for the representation of simple UI elements, and here is an example code for a stateless widget:

import 'package:flutter/material.dart';

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

2.2 Stateful Widget

A stateful widget is a widget that allows the user interface to change dynamically. This widget maintains its internal state, allowing the UI to be redrawn based on state changes. For example, if the color changes or the text changes when a button is clicked, a stateful widget can be used. Here is an example code for a stateful widget:

import 'package:flutter/material.dart';

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('$_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

3. Widget Tree

Flutter constructs the UI using a tree structure of widgets. All widgets are organized in a parent-child relationship, and widgets can be nested. The widget tree intuitively shows how the UI of a Flutter application is constructed. Parent widgets contain child widgets, allowing for the combination of all elements displayed on the screen.

4. Reusability of Widgets

One of the biggest advantages of Flutter widgets is their high reusability. If the user creates frequently used UI components as separate widgets, they can easily be reused elsewhere. For example, if a card UI is created to display user information, it can be made into a widget and reused across multiple screens.

5. Creating Custom Widgets

In Flutter, users can create custom widgets in addition to the built-in widgets. The process of creating custom widgets is very useful for building complex UIs tailored to user needs. Here is an example of creating a basic custom widget:

import 'package:flutter/material.dart';

class MyCustomWidget extends StatelessWidget {
  final String title;
  final Color color;

  MyCustomWidget({required this.title, this.color = Colors.blue});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: color,
      child: Text(
        title,
        style: TextStyle(fontSize: 20.0, color: Colors.white),
      ),
    );
  }
}

6. Layout of Widgets

Flutter provides various layout widgets to define how UI elements are arranged. Major ones include Column, Row, Stack, and Container. Each widget helps to arrange child widgets differently, making it easier to create complex layouts.

6.1 Column and Row

Column and Row allow you to arrange child widgets vertically or horizontally. For example, Column can be used when creating a list that requires vertical scrolling. Adding a few child widgets will automatically arrange the widgets.

import 'package:flutter/material.dart';

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('First line'),
        Text('Second line'),
        Text('Third line'),
      ],
    );
  }
}

6.2 Stack

Stack widgets are useful for layering child widgets. Each child widget is placed based on its coordinate origin, which provides the advantage of easily creating complex layouts.

7. Widget Lifecycle in Flutter

Widgets in Flutter have a lifecycle, managing the processes of creation, update, and destruction. Stateful widgets have methods such as createState(), initState(), didChangeDependencies(), build(), and dispose(). These methods manage the widget’s lifecycle and update its state.

8. Conclusion

In this article, we explored what a widget is in Flutter, the types and uses of widgets, and how to create custom widgets. Flutter’s widget system provides developers with powerful tools, allowing for the construction of excellent user interfaces. Continuously learning more in-depth content will greatly help in enhancing your Flutter manipulation skills. In the next lesson, we will delve deeper into widgets.