Flutter Course: Class and Widget Identity 6.5

1. Understanding Class

A class is the fundamental unit of object-oriented programming (OOP) and provides a blueprint for objects. In the Dart language, a class is a structure that can include data fields and methods.
A class provides a framework for creating objects, and each object inherits the properties and methods of the class.

1.1. Class Declaration

The way to declare a class in Dart is as follows.

class Dog {
    String name;
    
    Dog(this.name);
    
    void bark() {
        print('$name barks!');
    }
}

The example above defines a class called Dog, which has a field called name and includes a method called bark.

1.2. Class Inheritance

A class can inherit from another class for reuse. Inheritance allows for extending the functionality of existing classes.

class Cat extends Animal {
    void meow() {
        print('Meow!');
    }
}

In the above code, the Cat class inherits from the Animal class and adds new functionality.

2. The Identity of Widget

In Flutter, everything is a widget. UI components, as well as layout and style, are all represented through widgets. Widgets can have state, allowing interaction with the user.

2.1. StatelessWidget vs StatefulWidget

Flutter widgets are mainly divided into two types: StatelessWidget and StatefulWidget.

StatelessWidget

A StatelessWidget is a widget that does not have state. This widget does not change after it is created, and the UI always produces the same output.

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

StatefulWidget

A StatefulWidget is a widget that can hold a state, and when the internal state changes, the UI also changes. These widgets are mainly used when user input is required.

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

class _MyStatefulWidgetState extends State {
    int _counter = 0;

    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Number of button presses: $_counter'),
                ElevatedButton(
                    onPressed: () {
                        setState(() {
                            _counter++;
                        });
                    },
                    child: Text('Increase')
                ),
            ],
        );
    }
}

3. Widget Tree and Build Method

The flexibility of Flutter comes from the widget tree. All widgets form a tree structure interconnected, and each widget constructs the UI through the build method.

3.1. Widget Tree Structure

The widget tree consists of parent and child widgets. A parent widget can contain multiple child widgets, enabling the creation of complex UIs.

3.2. Role of the Build Method

Each widget calls the build method upon creation to determine what will be displayed on the screen. This method effectively renders an optimized UI based on the widget’s state.

4. Understanding Widget Lifecycle

For StatefulWidgets, the lifecycle of the widget is important. Various methods are called with each state change. This enables the provision of optimal performance and user experience.

4.1. Lifecycle Methods

The lifecycle of a StatefulWidget consists of the following methods:

• initState()
• didChangeDependencies()
• build()
• setState()
• dispose()

Each method is called under certain conditions, playing a role in managing the widget’s state and cleaning up resources when necessary.