What Are Stateless And Stateful Widget In Flutter

Introduction

 

Flutter is all about collections of widgets. If you're familiar with other programming languages like React Native, Android, or Ionic, then, you must know this equation.

 

Flutter Widget = React Native Components = Ionic Components/Controllers = Android Activities. In short, everything you make is a widget. Literally, Buttons, Tabs, ListView, Drawer, GridView, etc., all are widgets.

In general,

• Stateless widgets are those in which you want to make a UI that does not need to be dynamically changed whenever you update any value bound to it. For example, if you want to make a button whose title doesn't need to change dynamically, then you can create a separate widget for a button as a Stateless widget.
   
• Stateful widgets are just the reverse of Stateless widgets. This means when you want to make something that you want to change dynamically according to how a user interacts with it, then you can use the Stateful widget. For example, if you want to change the background color of the app on click of a button, you can make use of Stateful widget in this case.

A Stateful widget can contain another Stateless widget and vice-versa.

 

Example

 

The idea is to create a simple app in which a background color will be changed (toggle) when we click on the button.

 

Steps

• Create a new Flutter app and remove everything in the main.dart file.
• Import the Material package. Material package contains all the readymade widgets of the Google Material design concept.
  

  import 'package:flutter/material.dart';

• Define the main method of the app which is the entry point of the app.
  

  void main() => runApp(MyApp());

• Defining Stateless Widget includes a UI that will not be changed dynamically.
  

  class MyApp extends StatelessWidget {
     @override // StatelessWidget must override build()
     Widget build(BuildContext context) {
        return MaterialApp(
           title: 'Stateless & Stateful',
           theme: ThemeData(
              primarySwatch: Colors.blue,
           ),
           home: Scaffold(
           appBar: AppBar(
              title: Text('Stateless & Stateful'),
           ),
           body: BackgroundPage(), // including stateful widget in stateless widget
        ),
     );
  }

• Defining Stateful Widget includes a UI that will change dynamically.
  

  class BackgroundPage extends StatefulWidget {
      // stateful widget
      @override
      _BackgroundPageState createState() => _BackgroundPageState();
  }
  class _BackgroundPageState extends State < BackgroundPage > {
          // State<BackgroundPage> created class with state which extends state of type BackgroundPage
          Color backgroundColor = Colors.green;
          @override
          Widget build(BuildContext context) {
              return Container(decoration: BoxDecoration(color: backgroundColor), height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: Column(mainAxisAlignment: MainAxisAlignment.center, children: < Widget > [
                      RaisedButton(child: Text('Change Color'), onPressed: () {
                          setState(() { // any state change must be included between setState() otherwise state value changed but not reflect in UI. each time setState() called build() method called again but only changes the UI which would be required for state value changes. like in our example it regenerates only background color nothing else.
                              if (backgroundColor == Colors.green) backgroundColor = Colors.red;
                              else backgroundColor = Colors.green;
                          });
                      }, ], ), );
              }

• Run the app in emulator/simulator or in a real device.
• After running the app, you can see that on clicking the “Change Color” button, the background toggled from red to green and vice versa.
  
  Notes
  
  
• It is recommended to keep as much modularization in your code as possible to manage it easily.
• Don’t use Stateful widget if it is not required. You can separate a portion which is not required to be Stateful and define it as a Stateless widget so you can improve the app performance.

Conclusion

 

Flutter is the building block of widgets and achieving clarity about Stateless and Stateful widgets makes a developer an expert in it.