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.
DeveloperXon 
Leave a Reply