Flutter Stateless Widgets
The widgets whose state can not be altered once they are built are called stateless widgets. These widgets are immutable once they are built i.e. any amount of change in the variables, icons, buttons, or retrieving data can not change the state of the app. Below is the basic structure of a stateless widget. Stateless widget overrides the build() method and returns a widget. For example, we use Text or the Icon in our Flutter application where the state of the widget does not change in the runtime. It is used when the UI depends on the information within the object itself. Other examples can be Text, RaisedButton, IconButtons.
Example of Stateless Widgets:
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();
}
}
So let us see what this small code snippet tells us. The name of the stateless widget is MyApp which is being called from the runApp() and extends a stateless widget. Inside this MyApp a build function is overridden and takes BuildContext as a parameter. This BuildContext is unique to each and every widget as it is used to locate the widget inside the widget tree.
Note: The widgets of a Flutter application are displayed in the form of a Widget Tree where we connect the parent and child widgets to show a relationship between them which then combines to form the state of your app.
The build function contains a container which is again a widget of Flutter inside which we will design the UI of the app. In the stateless widget, the build function is called only once which makes the UI of the screen.
Example: Stateless Widget
import 'package:flutter/material.dart';
//This function triggers the build process
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: const 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(
"Stateless Widget",
style: TextStyle(color: Colors.black, fontSize: 30),
),
), // Container
), // Scaffold
); // MaterialApp
}
Output:
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