3. Flutter for Android Developer- Stateful and Stateless Widget

Go to index to find out all the articles in this series.

In any software , we want to react with user input like button pressed, radio toggle etc etc. In Android we don’t have to do anything to specify this behavior but in Flutter we have to.

In flutter we have two type of Widgets:

1. Stateless Widget
2. Stateful Widget

Stateless Widget

Widget that don’t hold the state(variable) inside itself to present past or future value are called stateless widget. There state depends on the information provided by the parent. For example , a textview , it just know the current text and nothing else. In the same way, a button, text field. They don’t need any update in the UI.

Stateful Widget

Widget that hold state. Their new state depends on the present state. For example, a check box , when we click on it, whether it is selected or un-selected depends on the current state of the check box. Also Ui needs to be updated. Other example include, toggle button, spinner,radio button.

A widget can be either a stateless widget or a stateful widget and nothing else

Let’s build a simple app, which has a checkbox. When user want to click on checkbox , checkbox will toggle. Simple enough. Let’s code.

1. As Stateless Widget

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {

  bool currentState = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Widget Basic"),),
        body:  getBody(),
      ),
    );
  }


Widget getBody(){
  
  return Checkbox(
    // value control wheather checkbox is selected or not
    value:  currentState,

    // onChange accept a function having prototype
    // fun(bool b){....}
    onChanged: (b){
          // we are toggling the state of widget
              currentState = !currentState; 
            },
  );
  
  
}
}

As you can see, checkbox state is not updated even after updating our currentValue variable in the onChanged. This is because after changing the state, UI needs to be rebuild. But this functionality is not present in stateless widget.

2. As stateful widget

import 'package:flutter/material.dart';

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


class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => _MyAppState();
}



class _MyAppState extends State<MyApp> {
  bool currentState = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Widget Basic"),),
        body:  getBody(),
      ),
    );
  }

  Widget getBody(){

    return Checkbox(
      // value control wheather checkbox is selected or not
      value:  currentState,

      // onChange accept a function having prototype
      // fun(bool b){....}
      onChanged:
          (bool){
            // we are toggling the state of widget
            setState(() {
              currentState = !currentState;
            });
       
      },
    );


  }
}

This is almost same as previous example , with one difference. In the onChanged listener we call setState() function. This function accept a function and is responsible for rebuilding the whole Widget again. Now when widget is build again, currentState is updated, hence the ui.

In the widget tree it can be visualized as

Thanks for your precious time.

If you like it, give it a clap.

In the next part , we will learn about basic widget used in Flutter.