Flutter App lifecycle explained

from Google

Flutter is a mobile UI framework that helps us to create modern mobile apps for iOS and Android using a single(almost) codebase. A Flutter application is just a combination of Stateful and Stateless Widgets. In this post, we going to explain the basic behavior of the Flutter stateful widget and its lifecycle.

Whats a Stateful Widget

A Stateful Widget is a widget that can change its state multiple times and can be redrawn onto the screen any number of times while the app is in action. Stateful Widgets are mutable. Stateful Widgets are used when part of the UI changes dynamically.

The lifecycle of the stateful widget is the following:

• createState
• mounted
• initState
• didChangeDependencies
• build
• didUpdateWidget

— — — — — — — — — — —

• deactivate
• dispose

createState

When we build a new StatefulWidget, it calls createState() right away and this override method MUST exist:

class NewScreen extends StatefulWidget {
 @override
 _NewScreenState createState() => _NewScreenState();
}

mounted

When createState creates your state class, a buildContext is assigned to that state. All widgets have a bool this.mounted property. It is turned true when the buildContext is assigned. It is an error to call setState when a widget is unmounted. this.mounted will always be true until dispose gets called.

initState

This is the first method called when the widget is created (after the class constructor, of course.) initState is called once and only once. It must call super.initState().

class NewScreenState extends State<NewScreen> {
  void initState() {
    super.initState();
  }
}

didChangeDependencies

This method is called immediately after initState() on the first time the widget is built. If your StatefulWidgets depends on an InheritedWidget it will call again if a change is necessary.

build

This method is the most “important” one of the Flutter life cycle methods. It relays your entire tree of Widgets to be render and is called right after didChangeDependencies(). All the GUI is render here and will be called every single time the UI needs to be render or redraw to the screen.

didUpdateWidget

This may not be a Lifecycle you’ll come across very often, it is a life cycle that is called once the parent Widget did a change and needs to redraw the UI. You’ll get the oldWidget parameter and you can compare it with the current widget to do some extra logic right there.

@override
void didUpdateWidget (Type oldWidget) {
   super.didUpdateWidget(oldWidget);
}

deactivate

This is called when the state is removed from the tree, but it might be reinserted into another part of the tree before the current frame change is finished.

dispose

This one is very important and is called by the Framework when this object and its State is removed from the tree permanently and will never build again. Is the equivalent opposite of initState. This Lifecycle is the one you need to unsubscribe streams, dispose animations, etc.

@override
void dispose() {
  flickManager.dispose();
  super.dispose();
}

I hope this write-up is useful for a lot of Android and iOS developers moving into Flutter. Happy coding 🎉🎉🎉