Flutter Handcrafted tutorial on Flutter UI Layout and Widgets — Statelesswidget and Statefulwidget

The author | | vlad source vlad (public number: fulade_me)

Statelesswidget

Statelesswidget is used when a Widget needs to be initialized, used, and destroyed without changing the style of its UI, such as a pure presentation page. Common StatelessWidgets include Text, Icon, ImageIcon, Dialog, and so on. As you can see, these are often controls that represent classes and do not need to change their state. Using statelessWidgets is lighter and saves more memory resources. The Statelesswidget is initialized without dynamically updating the UI, which also improves the performance of our software.

Note that in iOS development, when you initialize a Label and name it la and change its text content, la.text = @”new text” is called. Why is the Text of Flutter the Statelesswidget? Because all the widgets in Flutter are “configuration files”, Flutter helps us reinitialize a Text object after modifying the Text, rather than modifying the current Text object, which is different from native development.

Statefulwidget

Statefulwidgets are mutable widgets and will be used a lot in our development. It implements a setState method, and when we call this method, the Statefulwidget is re-rendered, not partially updated. When we call setState, Flutter will re-call its build method to rebuild the widget after receiving the message, thus updating the UI.

Take a look at the following code:

class StatefulWidgetDemoPage extends StatefulWidget {
  @override
  _StatefulWidgetDemoPageState createState() => _StatefulWidgetDemoPageState();
}

class _StatefulWidgetDemoPageState extends State<StatefulWidgetDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {});
        },
        child: Icon(Icons.add),
      ),
      appBar: AppBar(
        title: Text("StatefuleWidget Demo"),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          Container(
            width: 100,
            height: 100,
            margin: EdgeInsets.all(10),
            /// Color is a random value
            color: _randomColor(),
          ),
        ],
      ),
    );
  }

  /// Gets a random color value
  _randomColor() {
    return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),
        Random().nextInt(255)); }}Copy the code

We define a method that generates a randomColor, _randomColor(), which returns a Color object, and then we define a Container whose initialization parameter Color is the return value of _randomColor(). We then call the setState method in the onPressed method of FloatingActionButton, at which point the Flutter redraws the StatefulWidgetDemoPage, so every time the button is clicked, We can see that the colors of the containers are different.

Everything is a Widget

All UI elements we see in Flutter are generated by widgets, including gestures, and widgets in Flutter. The Widget is not the UI Element we see, the UI Element we actually see is called Element, and the Widget is Element’s configuration data. We wrote a large number of widgets that were rendered by Flutter to generate elements to display on the mobile phone screen. So when we call the setState method, we only update the configuration data. Flutter generates new elements based on the updated configuration data to render the UI.

Note that a Widget can correspond to multiple Elememt objects, just as a configuration file can generate multiple instance objects.

To see how the above example works, go to my Github repository project flutter_app->lib->routes->statefulwidget_page.dart and download and run it.