Widget and Application Life Cycle in Flutter

Introduction

Lifecycle is the state in which an application is in at any given time, for example, when an application is in use. In Flutter, the application's building blocks are widgets. Everything in Flutter is a widget; their lifecycles contribute to the greater lifecycle of the application. Let us go over the definition of a widget.

A widget is a class that can be created and called in the build function; they describe the outlay of a view in the current state. For example, a text widget is for styled texts in an app.

The build function is a function used to render views on the screen.

Widget Lifecycle

Flutter has two types of widgets:

  • Stateless widget: the state of this widget does not change over time. The data does not change inside it. The build function runs only once in the widget, which is when it is created. If it requires updating, it will be destroyed and then built afresh with new data.
  • Stateful widgets: the state of this widget changes over time. Various methods are used to change the data, and the build function is triggered to rebuild the widget on the screen.

Lifecycle Methods Used on Stateful widgets

These are methods that are called when the widget is already created.

  • initState() This method is the first to be called soon as the widget is created. It is called once. It then calls supper.initState()
@override
void initState(){
    //Initialize your objects here, e.g. stream
    super.initState();
}
  • build() This method must return a widget as it defines the User Interface.
@override
Widget build(BuildContext context){
    return Scaffold();
}
  • didChangeDependencies() This method is called on when the widget is built the first time immediately after initState(). On change of a dependency of this State class, it is invoked.
@override
void didChangeDependencies(){
    super.didChangeDependencies();
}
  • didUpdateWidget() This method is called when the configuration of the widget changes. It updates the current child widget because of the change to the parent widget's properties. This mostly takes place during debugging on hot reload.
@override
void didUpdateWidget(Widget oldWidget){
    super.didUpdateWidget(oldWidget);
}
  • setState() It is used to tell the framework that on change of data. This method is called from the Framework and also the developer.
void function(){
    setState(() {});
}
  • dispose() This method is invoked to release resources when the state object is removed. It is permanent and thus used to cancel streams, animation, etc.
    @override
    void dispose(){
      //implement dispose
      super.dispose();
    }
    

note: createState() is a method called when a Stateful widget is to be built by the Framework. It creates this widget's mutable state at the specified position in the tree. Therefore, it is not a lifecycle method and is not to be confused as such.

class HomeScreen extends StatefulWidget{
    HomeScreen ({Key key}) : super (key:key);
    @override
    HomeScreenState<Stateful Widget> createState() =>
  HomeScreen();
}

App Life Cycle States

App Lifecycle State: this is the state in which an app is in during use. There are different methods according to the state the app is in. The operating system sends out notifications on the app state.

app_lifecycle_flutter-image.png

The states include:

  • Resumed

The app is in the foreground, visible to the user and receiving and responding to the user.

  • Paused

The app is not visible to the user and does not receive user input. It is running in the background.

  • Inactive

The app is in the foreground; however, it is giving no response or receiving any user input.

  • Detached

The app is not visible and is being created/destroyed. It is still hosted on the Flutter Engine but detached from host views.

Cheers!