Flutter Stateful Widgets
The widgets whose state can be altered once they are built are called stateful Widgets. These states are mutable and can be changed multiple times in their lifetime. This simply means the state of an app can change multiple times with different sets of variables, inputs, data. Below is the basic structure of a stateful widget. Stateful widget overrides the createState() method and returns a State. It is used when the UI can change dynamically. Some examples can be CheckBox, RadioButton, Form, TextField.
Classes that inherit “Stateful Widget” are immutable. But the State is mutable which changes in the runtime when the user interacts with it.
Example
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();
}
}
So let us see what we have in this code snippet. The name of the Stateful Widget is MyApp which is called from the runApp() and extends a stateful widget. In the MyApp class, we override the create state function. This createState() function is used to create a mutable state for this widget at a given location in the tree. This method returns an instance for the respected state subclass. The other class which is _MyAppState extends the state, which manages all the changes in the widget. Inside this class, the build function is overridden which takes the BuildContext as the parameter. This build function returns a widget where we design the UI of the app. Since it is a stateful widget the build function is called many times which creates the entire UI once again with all the changes.
Example: Stateful Widget
import 'package:flutter/material.dart';
//This function triggers the build process
void main() => runApp(const MyApp());
// StatefulWidget
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 MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromARGB(255, 230, 255, 201),
appBar: AppBar(
leading: const Icon(Icons.menu),
backgroundColor: Colors.green,
title: const Text(
"w3wiki",
textAlign: TextAlign.start,
),
), // AppBar
body: const Center(
child: Text(
"StateFul Widget",
style: TextStyle(color: Colors.black, fontSize: 30),
),
), // Container
), // Scaffold
); // MaterialApp
}
}
Output:
Stateless widget is useful when the part of the user interface you are describing does not depend on anything other than the configuration information and the BuildContext whereas a Stateful widget is useful when the part of the user interface you are describing can change dynamically.
Flutter – Stateful vs Stateless Widgets
The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let’s dive directly into our main topic i.e. what are these stateful and stateless widgets and how do they differ from one another.
Contact Us