setState() method in flutter- When to use setState()?

Hey, what’s up coders. In this post, we are going to know about the setState() method in flutter. We will know what the setState() method does and when to use it. So let’s begin.

What does setState method do in flutter?

First let’s see the official definition –

Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.

That’s the official definition. If it doesn’t make sense to you then don’t worry, I will simplify it with an example.

Suppose you have a Text widget in your app and you want to change the text in it when a button gets pressed. So, changing the text means changing the state. So we make this change using the setState() method. Let’s make it more clear with an example.

Example –

class MyCenterWidgetState extends State<MyCenterWidget>
{
  //We will change this string when the button gets pressed.
  String str="Hey there!";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //set the text (str) to show when the app starts
          Text(str,
          style: TextStyle(fontSize: 50),),
          //When this button gets pressed then update the Text widget
          ElevatedButton(
            onPressed: (){
              //Call the setState() method when the button gets pressed
              setState(() {
                //Make the changes inside a function and pass it to the setState() method.
                //setState() will notify the framework that state has changed,
                // then build method of this widget will get called again to reflect the changes.
                str="How are you?";
              });
            },
            child: Text('Click Me'),
          )
        ],
      )
    );
  }

}

So, you can see here that I have taken String str. I have used the value of this string as text to the Text widget. So to change the text inside the text widget I have passed a function to the setState() method which changes the value of the String str.

So what’s happening here is that. When the button gets pressed, I am calling the setState method (from inside the method that I have passed to the ElevatedButton) and setState() is calling the method that I have passed to it to change the value of the string str and after that setState is notifying the framework to call the build() method again. And our text changes from “Hey there!” to “How are you?”.

Here’s the full code.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("setState method Example"),
      ),
      body: MyCenterWidget(),
    ),
    )
  );
}

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

  @override
  MyCenterWidgetState createState() =>MyCenterWidgetState();


}

class MyCenterWidgetState extends State<MyCenterWidget>
{
  //We will change this string when the button gets pressed.
  String str="Hey there!";
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //set the text (str) to show when the app starts
          Text(str,
          style: TextStyle(fontSize: 50),),
          //When this button gets pressed then update the Text widget
          ElevatedButton(
            onPressed: (){
              //Call the setState() method when the button gets pressed
              setState(() {
                //Make the changes inside a function and pass it to the setState() method.
                //setState() will notify the framework that state has changed, 
                // then build method of this widget will get called again to reflect the changes.
                str="How are you?";
              });
            },
            child: Text('Click Me'),
          )
        ],
      )
    );
  }

}

Output :

Before pressing the button.

After Pressing the button.

So in short, When you have to change the state of a widget, make the change in a function and pass it to the setState method.

That’s all about the setState() method in flutter.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: