Stateless vs Stateful widget lifecycle in Flutter

  1. Stateless widgets are those widgets whose state can’t be changed or altered once they are built.
  2. These widgets are immutable once they are built.
  3. Any change in data, widgets, icons, or variables do not change the state of the app or UI.
  4. They simply override the build() method and return a widget.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}
  1. Stateful widgets are those widgets whose state can be changed in real-time.
  2. Stateful widget overrides the createState() and returns a state.
  3. They are dynamic in nature.
  1. createState(): When we create a stateful widget, a createState() method is needed to return an instance of state associated with the widget.
  2. mounted: It is a bool value, that turns true when the buildContext is assigned to the widget.
  3. initState(): It is a method that is called just before the widget gets built. Inside this method, we can initialize the variable that is required by the build method.
  4. didChangeDependencies(): It is called just after the initState() method. It is also when the dependencies of the state object change. It can be called multiple times.
  5. build(): This method displays the UI on the screen. It returns a widget. It is called after the initState() method. This method rebuilds when setState is called.
  6. didUpdateWidget(Widget oldWidget): This method is helpful to unsubscribe the old object and subscribe to the new one if it is required for the object to be replaced with an updated widget configuration. Overriding this method responds when the widget changes (for example, to begin implicit animations).
  7. setState(): It is a method that is called when we need to update the UI. It can’t be called just after the build method. When this method is called the UI gets rebuilt by calling the build method again.
  8. deacti vate(): It is called when the widget is popped but it might be reinserted before the current frame change is finished.
  9. dispose(): This method is called after the state object is removed completely or called when the screen is popped.
class DemoWidget extends StatefulWidget {
@override
_DemoWidgetState createState() => _DemoWidgetState();
}
class _DemoWidgetState extends State<DemoWidget> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
}
@override
void didUpdateWidget(covariant DemoWidget oldWidget) {
// TODO: implement didUpdateWidget
super.didUpdateWidget(oldWidget);
}
@override
// TODO: implement mounted
bool get mounted => super.mounted;
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
@override
void deactivate() {
// TODO: implement deactivate
super.deactivate();
}
String text = "Stateful widget example"; @override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() {
text = "Stateful widget with setState example";
});
},
child: Text(text),
);
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store