DEV Community

Cover image for Flutter Lifecycle App
mikkel septiano
mikkel septiano

Posted on

 

Flutter Lifecycle App

Introduction

When we use an app, sometimes we found its data can get from the server periodically as for getting the newest and updated information, or on the bad day happens, our network connection is lost and reconnect without no reason. An application can also have and cycle to define its current state and what's next to do. That's called lifecycle.

So, what is lifecycle? based on Oxford dictionary meaning:

life cy·cle
/ˈlīf ˌsīkəl/
the series of changes in the life of an organism including reproduction.

so we can conclude that lifecycle is an series of state or change that build in an app to set its activities.

App Lifecycle Methods

1. The Basic

Most flutter state is wrapped on widgets. Flutter has majorly two types of widgets:

  1. Stateless Widgets
    Stateless Widgets are those widgets that don’t need to deal with the State as they don’t change powerfully at runtime (unchangeable).

  2. Stateful Widgets
    Stateful Widgets are those widgets that hold the State and the UI being portrayed can change progressively at runtime (changeable).

Stateful Widget needs a State attach to the widget as they need to deal with the State.

image flutter cycleimage source.

createState()
This method is called when we create another Stateful Widget. in Native Android similars to onCreate() in activity or onCreateView()

initState()
This is the strategy that is considered when the Widget is made interestingly and it is called precisely once for each State object. If we characterize or add some code in the initState() method this code will execute first even before the widgets are being built. in Native Android similars to onViewCreated() in fragment.

didChangeDependencies()
This method is called following the initState() method whenever the widget initially is constructed. This method is lifetime cycle that you can called multiple times. You can set many things here like calling API configuration, set application s

build()
This strategy is the main method as the rendering of all the widgets relies upon it. It is called each time when we need to render the UI Widgets on the screen.

didUpdateWidget()
This strategy is utilized when there is some adjustment of the configuration by the Parent widget. A typical case is when a parent passes some variable to the children widget via the constructor. For example when you want to configure screen rotation, change color theme of the app, etc

setState()
This strategy is to notify the framework that the internal state of this object has changed. Whenever you change the internal state of a State object, make the change in a function that you pass to setState.

deactivate()
This strategy is called when this object is removed from the widget tree. The framework calls this method whenever it removes this State object from the tree.

dispose()
This strategy is called when this object is removed from the widget tree permanently. The framework calls this method when this State object will never build again.

The difference between deactivate and dispose:

"dispose is definitive. deactivate is not"

deactivate is called when a widget may be disposed. But that is not guaranteed.

2. The Development

So how can Flutter determines its Lifecycle? Based on the great explanation of This link from Official link, the app lifecycle states in Flutter as defined by AppLifecycleState enum:

on didChangeDependencies() method can retrieve several AppLifecycleState value to define current app condition:

  1. detached: The application is still hosted on a flutter engine but is detached from any host views. This can be when the engine has started but not attached to any view or when the view is destroyed due to Navigator pop. in Native Android we call it onDestroyView() in fragment.

  2. inactive: The application is in an inactive state and is not receiving user input. for the example application enters this state during a phone call on both the platforms. Apps in this state should assume that they may be paused at any time. in Native Android we call it onStop() in activity.

  3. paused: The application is not currently visible to the user and running in the background. This is when you press the Home button. in Native Android we call it onPause() in activity.

  4. resumed: The application is visible and responding to user input. In this state, the application is in the foreground. in Native Android we call it onResume() in activity.

AppLifecycleState _appLifecycleState;

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _appLifecycleState = state;
    });
    if(state == AppLifecycleState.paused) {
      print('AppLifecycleState state: Paused app');
    }
    if(state == AppLifecycleState.resumed) {
      print('AppLifecycleState state: Resumed app');
    }
    print('AppLifecycleState state:  $state');
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.