Flutter Widget Lifecycle: Everything You Need to Know

Blog Banner

Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time. It is a combination of stateful and stateless widgets. Understanding the widget lifecycle is crucial for developing high-quality Flutter applications.

In this blog post, we will learn about widget lifecycle in Flutter with examples to help you understand how it works.

Before diving into Widget Lifecycle, Let us understand what does this widget means and what are the types of widgets in Flutter.

What is a Widget?

A widget is a building block of a Flutter application. It can be anything from a button to a complex UI component. Widgets are used to construct the user interface of the application. Flutter applications are made up of a tree of widgets. Each widget has its own properties and can be nested within other widgets.

I have explained Widget in detail here.

There are two types of widgets in Flutter.

• Stateless Widgets.
• Stateful Widgets.

=> Stateless Widgets do not contain states hence they can be updated only when its parent changes. Once created, stateless widgets cannot be updated means they are immutable, they have to be created again by supplying new data in order to see the changes.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

=> Stateful Widgets can hold the states internally, so it can be updated whenever its states changes and also whenever its parent changes. It is mutable widget, so it can be drawn multiple times in its lifetime.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Lifecycle of Widgets

What are Widget Lifecycle Methods:

The widget lifecycle is a sequence of events that occur when a widget is created, updated, or destroyed. Understanding the widget lifecycle is important for writing efficient Flutter applications.

createState()

initState()

didChangeDependencies()

build()

didUpdateWidget()

setState()

deactivate()

dispose()

• createState(): This method creates the state object for the widget. When we create a stateful widget, our framework calls a createState() method and it must be overridden.

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyScreenState();
}

• initState(): This method is called after the state object is created. It is used to initialise the state of the widget.

late int _counter;
@override
void initState() {
  print("initState");
  _counter = 0;
  super.initState();
}

• build(): This method is called after the state object is initialised. It is used to build the widget tree. This gets called each time the widget is rebuilt this can happen after initState, didChangeDependencies, didUpdateWidget, or when the state is changed via a call to setState.

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(
        title: const Text("Lifecycle Demo"),
      ),
      body: Container(
          child: Column(
        children: [
          Text(_counter.toString()),
          ElevatedButton(onPressed: _increment, child: const Text("Increment"))
        ],
      )),
    );
  }

• didChangeDependencies(): This method is called immediately after initState and when dependency of the State object changes via InheritedWidget.

  @override
  void didChangeDependencies() {
    print("didChangeDependencies");
    super.didChangeDependencies();
  }

• didUpdateWidget(): This method is called when the widget is updated with new properties. A typical case is when a parent passes some variable to the children() widget via the constructor.

  @override
  void didUpdateWidget(covariant MyPage oldWidget) {
    print("didUpdateWidget");
    super.didUpdateWidget(oldWidget);
  }

• deactivate(): This method is invoked whenState is removed from subtree A and reinserted to subtree B with the use of a GlobalKey.

  @override
  void deactivate() {
    print("deactivate");
    super.deactivate();
  }

• dispose(): This method is called when the widget is about to be destroyed permanently. It is used to release any resources used by the widget like closing network connections or stopping animations.

  @override
  void dispose() {
    print("dispose");
    super.dispose();
  }

Code File

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() {
    print("createState");
    return _MyPageState();
  }
}

class _MyPageState extends State<MyPage> {
  void _increment() {
    setState(() {
      _counter = _counter + 1;
    });
  }

  late int _counter;
  @override
  void initState() {
    print("initState");
    _counter = 0;
    super.initState();
  }

  @override
  void didChangeDependencies() {
    print("didChangeDependencies");
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(covariant MyPage oldWidget) {
    print("didUpdateWidget");
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    print("dispose");
    super.dispose();
  }

  @override
  void deactivate() {
    print("deactivate");
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(
        title: const Text("Lifecycle Demo"),
      ),
      body: Container(
          child: Column(
        children: [
          Text(_counter.toString()),
          ElevatedButton(onPressed: _increment, child: const Text("Increment"))
        ],
      )),
    );
  }
}

Order of lifecycle methods:

Order of lifecycle methods

Conclusion

In conclusion, understanding the widget lifecycle is essential for building high-quality Flutter applications. Remember that widgets are the building blocks of a Flutter application, and each widget has its own lifecycle. By mastering the widget lifecycle, you can build more efficient and effective Flutter applications.

❤ ❤ Thanks for reading this article ❤❤

If you find this blog informative do give a clap 👏 below.

Lets connect of LinkedIn.

I have written this blog in which I have explained everything about Flutter app lifecycles (Not the same as Widget lifecycle)