https://www.youtube.com/watch?v=FL_U8ORv-2Q

Stateless Widget

Constructor -> build()

Stateful Widget

import 'package:flutter/material.dart';
import 'package:statefulwidget_lifecycle_example/page/first_page.dart';

void main() {runApp(MyApp());}

class MyApp extends StatelessWidget {
  static final String title = 'Stateful Widget Lifecycle';

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: title,
        theme: ThemeData(primarySwatch: Colors.deepOrange),
        home: FirstPage(),
      );
}

import 'package:flutter/material.dart';
import 'package:statefulwidget_lifecycle_example/widget/number_widget.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int number = 1;

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('First Page'),
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () => setState(() => number += 1),
            ),
          ],
        ),
        body: NumberWidget(number: number),
      );
}

import 'package:flutter/material.dart';

class NumberWidget extends StatefulWidget {
  final int number;

  const NumberWidget({
    Key key,
    this.number,
  }) : super(key: key);

  @override
  _NumberWidgetState createState() {
    print('Number: $number CreateState');
    return _NumberWidgetState();
  }
}

class _NumberWidgetState extends State<NumberWidget> {
  int number;

  @override
  void initState() {
    super.initState();

    print('Number: ${widget.number} InitState');
    number = widget.number;
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('Number: ${widget.number} DidChangeDependencies');
  }

  @override
  void deactivate() {
    print('Number: ${widget.number} Deactivate');
    super.deactivate();
  }

  @override
  void dispose() {
    print('Number: ${widget.number} Dispose');
    super.dispose();
  }

  @override
  void didUpdateWidget(NumberWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('Number: ${widget.number} DidUpdateWidget');

    if (oldWidget.number != widget.number) {
      print('Number has changed');
    }
  }

  @override
  Widget build(BuildContext context) {
    print('Number: ${widget.number} Build');
    return Container(
      height: 500,
      child: TextButton(
        child: Text(
          number.toString(),
          style: TextStyle(fontSize: 80),
        ),
        onPressed: () {
          print('Number: ${widget.number} SetState');
          setState(() => number += 1);
        },
      ),
    );
  }
}

constructor

⬇️

createState()

This method is called when a StatefulWidget is created. It returns an instance of the State class associated with the widget.

⬇️

initState()

: This method is called once after the State object has been created. It is used to initialize the state of the widget, such as setting up variables or making network requests.

⬇️

didChangeDependencies()

: This method is called whenever the dependencies of the State object change. For example, if a StatefulWidget depends on a InheritedWidget, this method will be called whenever the InheritedWidget changes.

⬇️

didUpdateWidget()

: This method is called whenever the StatefulWidget is updated with a new instance of itself. This can happen if the widget's properties are changed, or if the widget is replaced with a new widget of the same type.

⬇️

build()

: This method is called whenever the widget needs to be rebuilt. This can happen for a variety of reasons, such as when the state of the widget changes, when the state of the parent widget changes, when the parent widget changes, or when the device orientation changes.

⬇️

dispose()

: This method is called when the widget is destroyed. It is used to clean up any resources that the widget may be using.

⬇️

setState()

: This method is used to update the state of the widget. When this method is called, the widget will be rebuilt.