Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

Flutter Stateful and Stateless Widgets

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

The state of an app can simply be described as whatever is stored in the app's memory while it is operating. This covers all widgets contributing to the app's UI, including the buttons, text fonts, icons, and animations. So now that we know what these states are, let's get straight to our main topic: what are stateful and stateless widgets, and how do they differ?

Source

State

“The State is the data that can be read synchronously when the widget is created and that may change over time.”

In other words, the data of the objects that the widget's properties (parameters) are maintaining at the moment of its formation is the widget's state (when the widget is painted on the screen). When a CheckBox widget is clicked, a check appears on the box, and the state can change.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Stateless Widget

Stateless widgets are those whose state cannot be changed once they have been created. Once developed, these widgets are immutable, which means that any changes to the variables, icons, buttons, or data retrieval will not affect the app's state. 

Stateless widgets include Icon, IconButton, and Text. Stateless widgets subclass StatelessWidget.

 

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return Container();
	}
}

 

Let's have a look at what this shortcode sample says. MyApp is the name of the stateless widget that is invoked via the runApp() method and extends a stateless widget. A build function is overridden in this MyApp and takes BuildContext as a parameter. This BuildContext is specific to each widget because it is used to locate it within the widget tree.

Stateful Widget

Stateful Widgets are widgets whose state can be changed after they've been built. These states are changeable, meaning they can change several times throughout their lives. This basically means that an app's state can change several times depending on various variables, inputs, and data. It's employed when the user interface can alter on the fly. CheckBox, RadioButton, Form, and TextField are some examples.

 

Immutable classes derive from "Stateful Widget." However, the State is mutable, and it changes over time when the user interacts with it.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
	@override
	_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
	@override
	Widget build(BuildContext context) {
		return Container();
	}
}

 

So, let's have a look at what's in this code sample. MyApp, which is called from runApp() and extends a stateful widget, is the name of the Stateful Widget. We override the create state function in the MyApp class. This createState() function creates a mutable state for this widget at a specified point in the tree. This function returns an instance of the state subclass in question. The other class, _MyAppState, extends the state, which handles all widget modifications. The build function, which takes the BuildContext as an argument, is overridden inside this class. This build function returns a widget where we can customize the app's user interface. Because it is a stateful widget, the build method is run multiple times, re-creating the complete UI with all the modifications.

Difference between Stateful and Stateless Widgets

Stateless Widget

Stateful Widget

Static widgets Dynamic Widgets

They do not depend on any data change or any behavior change.

 

They can be updated during runtime based on user action or data change.

 

Stateless Widgets do not have a state. Stateful Widgets have an internal state.
They will be rendered once and will not update themselves, but will only be updated when external data changes. They can re-render if the input data changes or if Widget’s state changes.
For Example, Text, Icon, and RaisedButton are Stateless Widgets. 

For Example Checkbox, Radio Button, and Slider are Stateful Widgets

 

Must Read: Yarn vs NPM

Frequently Asked Questions

What is Flutter, and why it is used?

Flutter is a portable UI toolkit from Google that lets you create attractive natively built apps for mobile, web, and desktop from a single codebase. Flutter is free and open-source, and it works with existing code. It is utilized by developers and organizations all over the world.

Is Flutter a programming language?

Flutter, on the other hand, is not a programming language. It's a prewritten software development kit (SDK) that includes ready-to-use and customizable widgets and libraries, tools, and documentation, all of which help developers create cross-platform apps.

Why is flutter so popular?

The majority of businesses are now enthused about Flutter. It's because a single codebase can be used to create apps for Android, iOS, Windows, Mac, Linux, and the web. Despite its rapid development and versatile user interface, many developers prefer React Native.

To utilize Flutter, how much programming expertise do I need?

Flutter is accessible to programmers familiar with object-oriented and imperative programming ideas (classes, methods, variables, and so on) (loops, conditionals, etc.).

People with no programming knowledge have been able to learn and utilize Flutter for prototyping and app development.

What types of apps can I create with Flutter?

Flutter is built to handle both Android and iOS mobile apps and interactive apps that you can embed in your websites or run on your desktop. (Windows desktop support is now available on the stable channel; macOS and Linux support is still in beta, although a snapshot of the beta is also accessible on the stable channel.)

Flutter is exceptionally well suited for apps that require highly branded designs. On the other hand, Flutter allows you to develop pixel-perfect experiences that are compatible with both Android and iOS design languages.

Conclusion

In this article, we discussed the Flutter Stateful and Stateless Widgets. We had also seen their differences.

We hope that our blog has helped you enhance your knowledge regarding Flutter Stateful and Stateless Widgets. Please check out these articles to improve your understanding of Flutter: Flutter TableFlutter TabbarFlutter RichText

 

Please refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. And also, enrol in our courses and refer to the mock test and problems available. Have a look at the interview experiences and interview bundle for placement preparations.
 

Please upvote our blog to help other ninjas grow.

Happy Coding!

Topics covered
1.
Introduction
2.
State
3.
Stateless Widget
4.
Stateful Widget
5.
Difference between Stateful and Stateless Widgets
6.
Frequently Asked Questions
6.1.
What is Flutter, and why it is used?
6.2.
Is Flutter a programming language?
6.3.
Why is flutter so popular?
6.4.
To utilize Flutter, how much programming expertise do I need?
6.5.
What types of apps can I create with Flutter?
7.
Conclusion