Widget lifecycle — Flutter!

Stateful Widget Lifecycle

A Stateful Widget goes through the following lifecycle stages:

1. createState()

In stateful widget, the 1st method that is called is createState() . The createState() method returns the instate of the state of the Stateful widget. Syntax:

class HomePage extends StatefulWidget {HomePage({Key key}) : super(key: key);@override
_HomePageState createState() => _HomePageState();

2. initState()

This is the first method called after the constructor of the Stateful Widget. It is called whenever the screen or widget is added to the widget tree! This method needs to call super.initState() which basically calls the initState of the parent widget (Stateful widget). Here you can initialize your variables, objects, streams, AnimationController, etc. Syntax:

initState() {
// TO DO

3. didChangeDependencies()

It is always called for the 1st time after initState() . You can include few functionalities like API calls based on parent data changes, variable re-initializations, etc. Syntax:

void didChangeDependencies() {

4. build()

The build method is the one that shows and renders the UI part to the user. Whenever you want to update your UI or if you click hot-reload, the Flutter framework rebuilds the build() method! If you want to explicitly rebuild the UI if any data is changed, you can use setState() which instructs the framework to again run the build method!

Widget build(BuildContext context) {
return Container();

5. didUpdateWidget(Widget oldWidget)

If the parent widget changes its properties or configurations, and the parent wants to rebuild the child widget, with the same Runtime Type, then didUpdateWidget is triggered. This unsubscribes to the old widget and subscribes to the configuration changes of the new widget!

void didUpdateWidget(covariant CurrentClass oldWidget) {
// TODO: implement didUpdateWidget

6. setState()

This method notifies the Flutter framework that the internal state of the widget tree has been modified and the build method needs to be rendered again. This internal state may or may not affect the UI visible to the user and hence it becomes necessary to rebuild the UI.
Note: Using setState in long widget trees is costly as it rebuilds the entire widget tree and not just the changed component. Always break down your widget and use any State Management Techniques.

void function(){
setState(() {});

7. deactivate()

This method is called when the widget is no longer attached to the Widget Tree but it might be attached in a later stage. The best example of this is when you use Navigator.push to move to the next screen, deactivate is called because the user can move back to the previous screen and the widget will again be added to the tree!

void deactivate() {

8. dispose()

This is called when the State object or Widget is removed permanently from the Widget Tree. Here you can unsubscribe streams, cancel timers, dispose animation controllers, close files, etc. In other words, you can release all the resources in this method. Now, in future, if the Widget is again added to Widget Tree, the entire lifecycle will again be followed!

void dispose() {
void function() {
if (mounted) setState(() {});

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Doshi

Abhishek Doshi


Google Developer Expert — Dart, Flutter & Firebase 💙💛