Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

flutter
dart
communitycreator

What are Stateful widgets?

Cynthia Peter

Every Flutter application is made up of widgets. This can range from buttons, columns, rows, icons, to even the app itself.

However, to better understand how to manage these widgets in your Flutter applications, it is important that you understand what each state is and what states each widget should take at specific times.

In a previous article, you learned about Stateless widgets in Flutter. A stateless widget is any widget that does not change with user input.

Such as:

  • Icons
  • Texts

Stateful widgets are reactive to the user’s input.

Understanding stateful widgets

  • Stateful widgets change dynamically.
  • Stateful widgets change according to a user’s input.
  • Stateful widgets change when there is user interaction.

For example: When a user updates a profile picture on an application like WhatsApp or Twitter, it changes the statecurrent condition of the application.

When you build mobile applications, there are instances where you need to make choices based on the state of the app. You can use stateless widgetssuch as a text widget to display the name of an app on the app bar.

However, if you need to accomplish any of the following tasks:

  • Update or rebuild an interface when data changes
  • Track data over time
  • Trigger rebuilds on their own
  • Animate a widget

You need to make use of the stateful widget. The stateful widget has a mutable stateThis is a property that will change over time during the lifetime of the widget.

Structure of a stateful widget

The snippet below shows a skeletal representation for a stateless widget with a MyStatefulBox subclass. This is a container widget with a blue property color.

import '';

class MyStatefulBox extends StatefulWidget {
  const MyStatefulBox({ Key? key }) : super(key: key);

  @override
  State<MyStatefulBox> createState() => _MyStatefulBoxState();
}

class _MyStatefulBoxState extends State<MyStatefulBox> {
  @override
  Widget build(BuildContext context) {
    return Container(color: const Colors.blue);
  }
}
Skeletal structure of a Stateful widget in Flutter.

The screenshot below shows a stateful widget used in a calculator. This widget has more constructor arguments, each of which corresponds to a final property.

Structure of a stateful widget.
Structure of a stateful widget.

Stateless widget in a tip calculator app

The stateful widget provides immutable configuration info and a state object that can change over time and trigger a rebuild of the UI.

A stateful widget makes it possible for you to manage data based on the user’s input or depending on the system’s state.

A simple application of a stateful widget can be seen in this sample tip calculator below:

The image above shows a tip calculator that allows a user to calculate a tip amount for various percentages of the cost of a service. It also provides the total amount that includes the tip.

The UI has been developed using flutter and is comprised of both stateful and stateless widgets.

tip calculator widgets
tip calculator widgets

From the image above, you can see a combination of both stateful and stateless widgets coming together to form a functional application.

Examples of Stateful widget

  • Slider’ widget allows the user to edit the tip percentage for service.
  • elevatedButton allows the user to click and submit the total per service. It also refreshes the screen for a new transaction.

In the application above, the rows, columns, and borders of the app don’t need to change. Therefore, it can be a stateless widget. However, when you input a number into the text field and move the slider, it updates on a part of the screen that is built as a stateful widget.

In summary

Stateful widgets maintain and manage data, and react according to what the data is doing within the mobile application.

Stateful widgets are as important as stateless widgets. It is important to understand where to make use of each, because one will make development easier.

For more information on stateful widgets, head over to flutter.io

RELATED TAGS

flutter
dart
communitycreator
RELATED COURSES

View all Courses

Keep Exploring