Flutter has become quite popular among developers lately. However, having enough knowledge about the lifecycle of Flutter applications is very important to ensure that the application runs without errors. In this article, we’ll cover the basics of the lifecycle of Flutter apps and let you know more about it.
Before we started, It would be more helpful if I remind you of stateful and stateless widgets.
In stateless widgets, all widgets are called only once. Therefore, the user’s interactions do not cause a change in the UI design. Icon, IconButton, and Text are examples of stateless widgets. Let’s show an example of a stateless widget.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}A stateful widget is dynamic. It can change over time, and it needs to be redrawn whenever the state changes. The State object communicates with the element and helps us control changes. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container();
}
}In Flutter, the lifecycle of Stateful Widgets refers to the process of widget creation, updating, and removal. These events occur during application execution and provide information about the application’s state. Flutter provides a set of predefined methods for managing the application lifecycle. These methods are called in accordance with the different situations of the application and manage the operation of the application.
createState() : The createState() function is responsible for creating a State object, which holds the mutable state of the widget. This function is called when the widget is first inserted into the widget tree
initState(): This function’s purpose is to initialize the state of the widget, such as setting default values for variables or initializing controllers for animations or text editing. The method is only called once in the lifecycle of the widget and should be used to perform any one-time initialization tasks that are required for the widget to function properly.
didChangeDependencies(): This function is a method that is called when the dependencies of a widget change, such as when it receives new data from its parent widget or when a StatefulWidget is rebuilt due to changes in its internal state. This method is also called immediately after initState.
build(): The build() function creates an updated interface based on the widget’s new state and properties, and redraws the widget tree. This function decides what the widget should display based on many factors. These factors include the widget’s location, size, shape, text, and other properties. Well, would you be surprised if we told you that the build method is not a Stateful Widget? If we need to explain the reason for this, it is defined as Stateless Widget because the build method is also required for immutable widgets. The ‘setState()’ method is required when using Stateful Widgets.
didUpdateWidget() : The didUpdateWidget() function, which is a method that we do not use much but is very useful, is used to render the changed widgets on the screen. The main purpose is to rearrange and update these widgets. For example, in a list structure, the didUpdateWidget() function can be used to change the list depending on the button.
setState(): The setState() method is only used with Stateful Widget inners. setState() tells to rebuild the page whenever something defined in setState() changes. It also shows this change to the user instantly.
deactivate (): The “deactivate” function in Flutter allows a widget to be stopped if it goes off the screen. This prevents the widget from consuming resources unnecessarily. This is the reverse of the initState() function for this method.
dispose(): this object is removed from the tree permanently. The deactivate() method is called before the dispose() method is called. Therefore, the deactivate() method can be used to temporarily deactivate a widget before releasing its resources. However, after the dispose() method is called, the widget’s resources are no longer available and the deactivate() method is not called.
Besides the topics we cover in this article, you can refer to the resources to learn more about Flutter. Flutter’s development team provides detailed documentation and examples on the topics.
As a result, the knowledge we have about the lifecycle of Flutter apps will help you better develop your app. I hope this article was helpful for those new to developing Flutter applications.
