Diving into Flutter Widget (P2)

Kim Quy
3 min readMay 12, 2021

Widget Lifecycle and Context

Widget Lifecycle

Widget Lifecycle

You can read this link to get more information about the widget lifecycle. Many blogs wrote about it. So now, I just want to mention some major information.

Stateless Widgets

  • Stateless Widget only runs the constructor function and build() method.

Stateful Widgets

The constructor function is not a part of the life cycle. But it calls first.

createState()

  • The method used to inserts the new state object into the tree.
  • A BuildContext is assigned to the state. (The detail about Context below)

initState()

  • Called only once. when a new Widget is inserted into the tree.
  • Used to initialize data that relies on a specific BuildContext.
  • Used to initialize properties that rely on this widget.
  • Used to do work that needs to happen just once.

didChangeDependencies()

  • Called before build(), after initState()
  • Called whenever an object that a widget depends on changes (It’s parents changes).

build()

  • The method executes and returns a Widget.

didUpdateWidget()

  • Called before build(). This method is called when the widget receives a new configuration.
  • If the parent widget change configuration and has to rebuild this widget.
  • Flutter is re-using the state.
  • This is a replacement for initState() if the widget associated with a pre-existing state object is rebuilt.

setState()

  • build() will run after setState() end. This method is called when the widget changes the internal state.
  • Tell Flutter that data has changed and it should rebuild a widget.

deactivate()

  • Called when the state is removed from the tree, but can be reinserted before the current frame change is finished.
  • For example, When you go to the next screen, The next screen will be built, after that the current screen(widget) will call deactivate() and remove for a time. Next, When you use the back button to back the previous screen will be activated again.

dispose()

  • The method will be called when a widget is destroyed.

Example:

1 When home-screen is on — createState(Home) — initState(Home)-didChangeDependencies(Home) — build(Home).

2 When cart-screen is on — createState(Cart) — initState(Cart)-didChangeDependencies(Cart) — build(Cart) — deactivate(Home) — didChangeDependencies(Home) — build(Home).

3 When you select back button — deactivate(Home) — didChangeDependencies(Home) — buld(Home) — deactivate(Cart) — dispose(Cart).

Context

  • Every widget has its own context. The context will get in the build method. (The context is the element of a widget in the element tree)
  • The context is used internally by Flutter to understand where this widget belongs and all the widgets' contexts.
  • The contexts build a skeleton of the widget tree.
  • The context gives you a direct communication channel across your entire widget tree. Because contexts know about each other, they know where in the widget tree they are and which other widgets exist around them.
  • One of the common uses is passing it to the of method when using an Inherited Widget.

InheritedWidget

InheritedWidget is used when you want to store and share the information with all of the widgets in the widget tree.

Sample Code implement InheritedWidget

In this example, The LoggedInAccount class is shares the logged-in information to all of the widgets in the app. All of the other screens can call LoggedInAccount.of(context).name to get the name of the logged-in account. You will need InheritedWidget.

  • The implement of InheritedWidget needs a context object to go up the tree and look for a widget that matches that type (LoggedInAccount).
  • To make it simpler and more readable, InheritedWidgets often include a static method called “of”.
  • You will get the use-case of context many times. Ex: Them.of(context).primaryColor

Note: In this example, “name” and “avatarPath” are the final properties.

  • InheritedWidget is immutable. So “name” and “avatarPath” must be final.
  • You can only replace an InheritedWidget’s field by rebuilding the whole widget.
  • Final only means it can’t be reassigned, It does not mean it cannot change internally.

References:

--

--