If you need to reproduce it, please indicate the source: Flutter Learning Notes (9) --Component Widget

In Flutter, all displays are Widgets, Widgets are the basis of everything. We can set data by modifying the data, and then use setState() to notify the framework. The framework will call the State's construction method again to update the user interface. Flutter will automatically update the Widget through the bound data, so youAll you need to do is implement a Widget interface and bind it to your data.

Widgets are divided into stateful and stateless StatelessWidget s. In Flutter, a Widget supports only one frame, which intelligently draws the whole interface at once. Stateless means that when the frame is drawn, the state of the frame remains unchanged, while a stateful Widget when the data is updated, in factA new widget is drawn, but state implements cross-frame data synchronization.

The above is a simple description of both stateful and stateless widgets, so how do we choose when and what kind of widgets to have?Give two simple examples to illustrate

1. On the app startup page, we need to show a startup map, but after the display, we don't need any changes to this picture, just keep it in this frame, then we can choose StatelessWidget as stateless

2. Within a page, there is a text and a button. The requirement is that after clicking a button, the content of the text needs to change, that is, according to user interaction or network request, the page needs to change and need to be redrawn. In this case, we need a stateful StatefulWidget.

If you still don't understand it, remember one rule: if a widget changes (such as user interaction, network requests to update a page), it is stateful; otherwise, if the widget does not change after drawing, it is stateless.

Now that we've talked about stateless and stateless widget s, let's talk more about how they work:

• Stateless Widget

Inherit StatelessWidget and return a laid-out component through build

import 'package:flutter/material.dart';

void main() => runApp(DEMOWidget());


class DEMOWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stateless Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget Demo'),
        ),
        body: Center(
          child: Text('This is a stateless Demo'),
        ),
      ),
    );
  }
}

• Stateful Widget

import 'package:flutter/material.dart';

void main() => runApp(SampleApp());


class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => new _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(child: new Text(textToShow)),
      floatingActionButton: new FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }
}

Next Chapter: Flutter Learning Notes (10) - Fundamentals