In Flutter, everything displayed is a Widget. Widgets are the foundation of everything, as responsive rendering, similar to the MVVM implementation mechanism.

import 'package:flutter/material.dart';

void main() {
  /// RunApp is the root node in the Widget tree
  /// The Widget tree has two widgets, Center and its child Widget, Text
  runApp(
    const Center(
      child: Text(
        'Hello, world! ',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}
Copy the code

Flutter automatically updates the Widget with the bound data by modifying the data and setting it with setState. So all you need to do is implement the Widget interface and bind it to the data.

There are two types of widgets: stateless widgets and stateless widgets. Each page in a Flutter is a frame. Stateless widgets stay within that frame while stateful widgets update their data. In fact, the new Widget is drawn, but State implements data synchronization across frames.

  • StatelessWidget the StatelessWidget receives parameters from its parent widget that are stored in final member variables. These stored variables are used to generate new parameters for the created widget when it needs to be built ().

  • A StatefulWidget is a special widget that generates a State object for holding State. In State, you can change data dynamically, similar to the MVVM implementation, and after setState, the changed data triggers a Widget rebuild refresh.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
      home: Scaffold(
    body: Center(
      child: Counter(),
    ),
  )));
}

class TextColumn1 extends StatelessWidget {
  final String? name;
  const TextColumn1({this.name, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String defaultName = name ?? 'herry';
    return Text.rich(TextSpan(text: 'Hello ', children: <TextSpan>[
      TextSpan(
        text: '$defaultName ',
        style: const TextStyle(color: Colors.green),
      ),
      const TextSpan(
          text: 'beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      const TextSpan(
          text: 'world ', style: TextStyle(fontWeight: FontWeight.bold)) ])); }}class CounterDisplay extends StatelessWidget {
  final int count;
  const CounterDisplay({required this.count, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('Count:$count'); }}class CounterIncrementer extends StatelessWidget {
  final VoidCallback onPressed;
  const CounterIncrementer({required this.onPressed, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onPressed, child: const Text('Increment')); }}class Counter extends StatefulWidget {
  const Counter({Key? key}) : super(key: key);

  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;
  void _increment() {
    setState(() {
      ++_counter;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CounterIncrementer(onPressed: _increment),
        const SizedBox(
          width: 18,
        ),
        CounterDisplay(count: _counter),
        // const TextColumn1(), // output herry
        const TextColumn1(name: 'mickey'), / / output mickey]); }}Copy the code

The main declaration cycles in State are:

  • InitState: initializes. In theory, it is initialized only once.
  • DidChangeDependencies: called after initState, where other states are available.
  • Dispose: dispose, called only once.