The Flutter Widget life cycle and application declaration cycle

  • Widget life cycle
  • Application cycle

Widget life cycle

Initialize life createState() initState() : Generally do some initialization

Update didChangeDependencies() Call the build() primary update method when a State dependency changes, which is usually used only to build widgets. Calling setState reconstructs this method didUpdateWidget().

Dispose () This callback is called when the State object is removed from the tree, dispose() is called when the State object is permanently removed from the tree; Resources are usually released in this callback.

import 'package:flutter/material.dart';

/* * Init * createState() initState() * * Update * didChangeDependencies() build() didUpdateWidget() * * Destroy * deactivate() dispose() * */
// The Widget declaration cycle and application declaration cycle in Flutter
class Flutter_Demo9 extends StatefulWidget {
  @override
  _Flutter_Demo9State createState(a) { _Flutter_Demo9State(); }}class _Flutter_Demo9State extends State<Flutter_Demo9> {
  int _mTapIndex = 0;
  @override
  void initState(a) {
    // TODO: implement initState
    print("1028:---initState---");
    super.initState();
  }

  @override
  void didChangeDependencies(a) {
    // TODO: implement didChangeDependencies
    print("1028:---didChangeDependencies---");
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    print("1028:---build---");
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget declaration cycle and application declaration cycle in Flutter"),
        leading: GestureDetector(
          onTap: () {
            returnPage();
          },
          child: BackButton(),
        ),
      ),
      body: Container(
        child:Column(
          children: <Widget>[
            GestureDetector(
              onTap: (){
                setState(() {
                  _mTapIndex ++;

                });
              },
              child: Icon(
                Icons.android,
                size: 100,
              ),
            ),
            Text('${_mTapIndex}'[[(), [(), [(). }@override
  void didUpdateWidget(Flutter_Demo9 oldWidget) {
    print("1028:---didUpdateWidget---");
    super.didUpdateWidget(oldWidget);
  }

  @override
  void deactivate(a) {
    print("1028:---deactivate---");
    super.deactivate();
  }

  @override
  void dispose(a) {
    print("1028:---dispose---");
    super.dispose(); } returnPage() { Navigator.pop(context); }}Copy the code

Effect:

Initialize the page when clicking the jump page:



InitState – > didChangeDependencies – > build



The setState(){} method is called when the Android black icon is clicked to rebuild the build

The button was clicked 5 times, so build was called 5 times



When you hit the lightning button to run, you will only run Build, not reinitialize

The destruction

Click back button, deactivate() — > Dispose ()

Application cycle

  • 1. WidgetsBindingObserver is required to monitor the application lifecycle
  • Bind WidgetsBinding in initState()
  • Method in the write WidgetsBindingObserver didChangeAppLifecycleState (AppLifecycleState state) to listen on life cycle
  • Dispose () unbind the WidgetsBinding
import 'package:flutter/material.dart';


class Flutter_Demo9 extends StatefulWidget {
  @override
  _Flutter_Demo9State createState(a) => _Flutter_Demo9State();
}

// WidgetsBindingObserver is required to listen for the application lifecycle
class _Flutter_Demo9State extends State<Flutter_Demo9>  with WidgetsBindingObserver {
  int _mTapIndex = 0;
  @override
  void initState(a) {
    / / bind WidgetsBinding
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // TODO: implement didChangeAppLifecycleState
    super.didChangeAppLifecycleState(state);
    print("1028__staate: ${state}");
    if(state == AppLifecycleState.paused){
      print("DidChangeAppLifecycleState: into the background");
    }else if(state == AppLifecycleState.resumed){
      print("DidChangeAppLifecycleState: into the front desk");
    }else if(state == AppLifecycleState.inactive){
      When an application is inactive and receives an input callback, for example, answer the phone
      print("didChangeAppLifecycleState:inactive");
    }else if(state == AppLifecycleState.suspending){
      // Calling IOS when an infrequently used application is invoked will not trigger
      print("didChangeAppLifecycleState:suspending"); }}@override
  Widget build(BuildContext context) {
    print("1028:---build---");
    return Scaffold(
      appBar: AppBar(
        title: Text("Widget declaration cycle and application declaration cycle in Flutter"),
        leading: GestureDetector(
          onTap: () {
            returnPage();
          },
          child: BackButton(),
        ),
      ),
      body: Container(
        child:Column(
          children: <Widget>[
            GestureDetector(
              onTap: (){
                setState(() {
                  _mTapIndex ++;

                });
              },
              child: Icon(
                Icons.android,
                size: 100,
              ),
            ),
            Text('${_mTapIndex}'[[(), [(), [(). }@override
  void dispose(a) {
    / / WidgetsBinding solution
    WidgetsBinding.instance.removeObserver(this); }}Copy the code

Enter background effects:



The Log shows:

Enter the foreground effect:



The Log shows:

The complete code

How Flutter responds to Flutter click events and gestures (1.5)

Next chapter :Flutter mobile camera, select the photo function to practice

Original is not easy, your thumbs up is my biggest power, please leave your thumbs up. Thank you ~