setState() is one of the simplest and most commonly used ways to manage local or widget-specific state in Flutter. It is provided by the State class and tells the Flutter framework that the internal state of a widget has changed and that the widget's UI should be rebuilt.
State is data that can change during the lifetime of a widget and can affect what appears on the screen.
Examples of state include:
When this data changes, Flutter needs to rebuild the relevant UI so that the user can see the updated value.
setState() is a method used inside a State class to notify Flutter that the state of a widget has changed.
The basic syntax is:
setState(() {
// Change the state here
});When setState() is called, Flutter marks the associated widget as needing to be rebuilt and calls its build() method again during the next appropriate update.
Changing a variable by itself does not tell Flutter that the UI needs to change.
For example:
int count = 0;
void increment() {
count++;
}The value of count changes in memory, but Flutter is not automatically informed that the UI should rebuild.
Instead, use:
int count = 0;
void increment() {
setState(() {
count++;
});
}Now Flutter knows that the state changed and can rebuild the widget.
setState() is normally used with a StatefulWidget.
A StatefulWidget is implemented using two classes:
StatefulWidgetStateThe mutable state is stored in the State class, while the widget configuration remains immutable.
class Counter extends StatefulWidget {
const Counter({super.key});
@override
State createState() => _CounterState();
}
class _CounterState extends State {
int count = 0;
@override
Widget build(BuildContext context) {
return Text('$count');
}
} The following example creates a counter application where pressing the button increases the counter.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget {
const CounterScreen({super.key});
@override
State createState() => _CounterScreenState();
}
class _CounterScreenState extends State {
int count = 0;
void incrementCounter() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('setState Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'$count',
style: const TextStyle(fontSize: 40),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: incrementCounter,
child: const Text('Increment'),
),
],
),
),
);
}
} count is 0.incrementCounter() is called.setState() changes count.build() method runs again.The general flow is:
User Action
↓
Event Handler
↓
setState()
↓
State Variable Changes
↓
Flutter Marks Widget for Rebuild
↓
build() Runs Again
↓
Updated UIFor example:
onPressed: () {
setState(() {
count++;
});
}setState() is useful when a UI element has two or more states.
For example, showing and hiding a password:
class PasswordField extends StatefulWidget {
const PasswordField({super.key});
@override
State createState() => _PasswordFieldState();
}
class _PasswordFieldState extends State {
bool isObscured = true;
@override
Widget build(BuildContext context) {
return TextField(
obscureText: isObscured,
decoration: InputDecoration(
labelText: 'Password',
suffixIcon: IconButton(
icon: Icon(
isObscured
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
setState(() {
isObscured = !isObscured;
});
},
),
),
);
}
} Here, isObscured is local widget state. Calling setState() causes the password field to rebuild with the new value.
class TermsCheckbox extends StatefulWidget {
const TermsCheckbox({super.key});
@override
State createState() => _TermsCheckboxState();
}
class _TermsCheckboxState extends State {
bool accepted = false;
@override
Widget build(BuildContext context) {
return CheckboxListTile(
title: const Text('Accept Terms and Conditions'),
value: accepted,
onChanged: (value) {
setState(() {
accepted = value ?? false;
});
},
);
}
} class ThemeSwitch extends StatefulWidget {
const ThemeSwitch({super.key});
@override
State createState() => _ThemeSwitchState();
}
class _ThemeSwitchState extends State {
bool isDark = false;
@override
Widget build(BuildContext context) {
return Switch(
value: isDark,
onChanged: (value) {
setState(() {
isDark = value;
});
},
);
}
} setState() can also be used when modifying a local list.
class ShoppingList extends StatefulWidget {
const ShoppingList({super.key});
@override
State createState() => _ShoppingListState();
}
class _ShoppingListState extends State {
final List items = [];
void addItem() {
setState(() {
items.add('New Item');
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: addItem,
child: const Text('Add Item'),
),
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
],
);
}
} void addProduct(String product) {
setState(() {
products.add(product);
});
}
void removeProduct(int index) {
setState(() {
products.removeAt(index);
});
}Both operations change the state and therefore should be performed inside setState().
class CategorySelector extends StatefulWidget {
const CategorySelector({super.key});
@override
State createState() => _CategorySelectorState();
}
class _CategorySelectorState extends State {
String selectedCategory = 'All';
final categories = [
'All',
'Mobile',
'Web',
'Backend',
];
@override
Widget build(BuildContext context) {
return DropdownButton(
value: selectedCategory,
items: categories.map((category) {
return DropdownMenuItem(
value: category,
child: Text(category),
);
}).toList(),
onChanged: (value) {
setState(() {
selectedCategory = value!;
});
},
);
}
} A TextField can update another part of the UI when the entered value changes.
class NameScreen extends StatefulWidget {
const NameScreen({super.key});
@override
State createState() => _NameScreenState();
}
class _NameScreenState extends State {
String name = '';
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
onChanged: (value) {
setState(() {
name = value;
});
},
),
const SizedBox(height: 20),
Text('Hello $name'),
],
);
}
} One of the most important concepts is that setState() does not directly change the screen. Instead, it tells Flutter that the state has changed and that the framework should rebuild the affected widget.
setState(() {
count++;
});After the state changes, Flutter executes the widget's build() method again so the UI can reflect the new state.
Consider this code:
void increment() {
count++;
}The variable may change internally, but Flutter has not been notified that the widget needs to rebuild.
Correct approach:
void increment() {
setState(() {
count++;
});
}This is why forgetting setState() is a common reason for UI values not appearing to update.
The state mutation that affects the widget should generally be placed inside the setState() callback.
Example:
setState(() {
username = 'Manish';
isLoggedIn = true;
});The callback should describe the state change. Keep unrelated expensive operations outside it.
setState() is especially suitable when the state belongs to one widget or a small part of the widget tree.
Examples:
Flutter documentation describes this type of local state as ephemeral state.
A selected bottom-navigation tab is a common example.
int currentIndex = 0;
BottomNavigationBar(
currentIndex: currentIndex,
onTap: (index) {
setState(() {
currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
);If only this widget needs the selected index, managing it with setState() is straightforward.
Technically, State and setState() can be used for all kinds of state. However, when state needs to be shared across many widgets or screens, a dedicated state-management approach can become more appropriate.
Examples of shared application state include:
There is no universal rule separating ephemeral state from application state; the appropriate choice depends on the application.
| Feature | StatelessWidget | StatefulWidget |
|---|---|---|
| Mutable local state | Not stored directly | Stored in State object |
| setState() | Not available | Available in State class |
| UI changes based on internal state | Usually no internal mutable state | Yes |
| Example | Static text | Counter, switch, checkbox |
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State createState() => _CounterPageState();
}
class _CounterPageState extends State {
int counter = 0;
void increment() {
setState(() {
counter++;
});
}
void decrement() {
setState(() {
if (counter > 0) {
counter--;
}
});
}
void reset() {
setState(() {
counter = 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter State Management'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Counter Value',
style: TextStyle(fontSize: 20),
),
Text(
'$counter',
style: const TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: decrement,
child: const Text('-'),
),
const SizedBox(width: 10),
ElevatedButton(
onPressed: reset,
child: const Text('Reset'),
),
const SizedBox(width: 10),
ElevatedButton(
onPressed: increment,
child: const Text('+'),
),
],
),
],
),
),
);
}
} A single StatefulWidget can contain multiple state variables.
class _ProfileState extends State {
String name = 'John';
int age = 25;
bool isOnline = false;
void updateProfile() {
setState(() {
name = 'Alex';
age = 30;
isOnline = true;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(name),
Text('$age'),
Text(isOnline ? 'Online' : 'Offline'),
],
);
}
} Multiple related state values can be changed inside the same setState() call.
setState() is frequently used to display different widgets depending on the current state.
bool isLoading = false;
void loadData() {
setState(() {
isLoading = true;
});
// Perform asynchronous work...
}The UI can then use:
isLoading
? const CircularProgressIndicator()
: const Text('Data Loaded');In real applications, asynchronous operations should also update success and error states appropriately.
A common pattern is to update loading state before an asynchronous operation and update the result afterward.
bool isLoading = false;
String message = '';
Future loadData() async {
setState(() {
isLoading = true;
message = '';
});
try {
await Future.delayed(const Duration(seconds: 2));
setState(() {
message = 'Data loaded successfully';
isLoading = false;
});
} catch (error) {
setState(() {
message = 'Something went wrong';
isLoading = false;
});
}
} For larger applications, more structured approaches such as ChangeNotifier or other state-management solutions can separate this state logic from the UI.
Do not call setState() when no relevant UI state has changed.
Unnecessary example:
setState(() {
print('Hello');
});The code above does not modify UI state, so using setState() provides no useful state-management purpose.
Better:
print('Hello');Prefer small and clear state updates.
Good:
setState(() {
count++;
});Avoid putting unrelated heavy operations inside setState().
For example, network requests, large file processing, or expensive calculations should generally be handled outside the state mutation callback when possible.
Stateful widgets have a lifecycle. Common lifecycle methods include:
initState()didChangeDependencies()build()didUpdateWidget()setState()deactivate()dispose()setState() is used when a value stored by the State object changes and the UI needs to reflect that change.
When an asynchronous operation finishes later, the widget may have already been removed from the widget tree. Before calling setState() after an awaited operation, check whether the State object is still mounted when appropriate.
Future loadData() async {
final result = await fetchData();
if (!mounted) {
return;
}
setState(() {
data = result;
});
} This helps avoid attempting to update a State object that is no longer mounted.
Incorrect:
void increment() {
counter++;
}Correct:
void increment() {
setState(() {
counter++;
});
}Calling setState() directly during the build() process can cause repeated rebuilds and should generally be avoided.
Instead, change state in response to events, lifecycle callbacks, or completed asynchronous operations as appropriate.
If many unrelated widgets need access to the same state, keeping that state deep inside one widget and passing callbacks through many levels can become difficult to maintain.
In such situations, Flutter provides other approaches such as:
ValueNotifier and InheritedNotifierInheritedWidget and InheritedModelChangeNotifiersetState() is a built-in low-level approach, while other built-in and community approaches can be useful for more complex cases.
| Feature | setState() | ChangeNotifier |
|---|---|---|
| Main purpose | Local widget state | Share and notify about state changes |
| Location | State class | Separate state/ViewModel class |
| Complexity | Simple | More structured |
| Suitable for | Small/local UI state | Shared or more complex state |
| Notification method | setState() | notifyListeners() |
ChangeNotifier can notify listening widgets when its data changes, while setState() is directly associated with a particular State object.
Provider is a community package often used with ChangeNotifier for application state. It is different from simply using setState().
For small isolated state, setState() may be sufficient. For state shared across multiple widgets, a more structured approach can reduce callback and state-passing complexity.
Flutter's simple state-management guide demonstrates Provider with ChangeNotifier, ChangeNotifierProvider, and Consumer.
Sometimes the parent widget should manage state and pass the current value to a child.
class ParentWidget extends StatefulWidget {
const ParentWidget({super.key});
@override
State createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State {
bool active = false;
void handleChanged(bool value) {
setState(() {
active = value;
});
}
@override
Widget build(BuildContext context) {
return ChildWidget(
active: active,
onChanged: handleChanged,
);
}
} In this pattern, the parent owns the state and uses setState() to update it. Flutter's interactivity guide describes widget-owned, parent-owned, and mixed approaches to managing state.
class FavoriteButton extends StatefulWidget {
const FavoriteButton({super.key});
@override
State createState() => _FavoriteButtonState();
}
class _FavoriteButtonState extends State {
bool isFavorite = false;
@override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(
isFavorite
? Icons.favorite
: Icons.favorite_border,
),
onPressed: () {
setState(() {
isFavorite = !isFavorite;
});
},
);
}
} This is a good example of local state because the favorite button can manage its own temporary visual state.
class ExpandableSection extends StatefulWidget {
const ExpandableSection({super.key});
@override
State createState() => _ExpandableSectionState();
}
class _ExpandableSectionState extends State {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
ListTile(
title: const Text('Flutter'),
trailing: IconButton(
icon: Icon(
expanded
? Icons.expand_less
: Icons.expand_more,
),
onPressed: () {
setState(() {
expanded = !expanded;
});
},
),
),
if (expanded)
const Padding(
padding: EdgeInsets.all(16),
child: Text(
'Flutter is a UI toolkit for building applications.',
),
),
],
);
}
} class LikeButton extends StatefulWidget {
const LikeButton({super.key});
@override
State createState() => _LikeButtonState();
}
class _LikeButtonState extends State {
int likes = 0;
void likePost() {
setState(() {
likes++;
});
}
@override
Widget build(BuildContext context) {
return Row(
children: [
IconButton(
onPressed: likePost,
icon: const Icon(Icons.thumb_up),
),
Text('$likes likes'),
],
);
}
} setState() for state that belongs to the current widget.setState() callback.setState() when nothing relevant changed.| Situation | Recommended Approach |
|---|---|
| Counter inside one screen | setState() |
| Checkbox state | setState() |
| Password visibility | setState() |
| Selected tab used by one widget | setState() |
| Expandable section | setState() |
| Shopping cart shared across many screens | Consider application state management |
| Authentication state across the application | Consider a shared state architecture |
| Complex business state | Consider a structured state-management approach |
StatefulWidget
↓
State Object
↓
User Interaction
↓
setState()
↓
State Changes
↓
build()
↓
Updated Widgets
↓
Updated UIIt is important to understand that changing a variable and rebuilding the UI are two related but distinct ideas.
counter++;This changes the variable.
setState(() {
counter++;
});This changes the variable and informs Flutter that the widget needs to rebuild.
Answer: setState() is a method of the State class that tells Flutter that the widget's internal state has changed and that its UI should be rebuilt.
Answer: It is used from a State object associated with a StatefulWidget.
Answer: Flutter marks the State object as needing to rebuild and subsequently runs its build() method so the UI can reflect the updated state.
Answer: The state variable can change internally, but Flutter is not notified that the widget needs to rebuild, so the UI may not reflect the new value.
Answer: It can technically manage many types of state, but it is especially suitable for local or widget-specific state. Larger applications may benefit from more structured state-management approaches.
Answer: Yes. Multiple related state variables can be changed within the same setState() callback.
Answer: No. setState() is part of Flutter's built-in StatefulWidget/State mechanism.
setState() is used to notify Flutter about local state changes.StatefulWidget's State class.setState() callback.setState() causes the relevant widget to be scheduled for rebuilding.build() method then reflects the new state in the UI.After studying setState() state management, you should be able to:
setState().setState() mistakes.For structured Flutter learning and practical development training, explore the following resources:
setState() is a fundamental Flutter state-management mechanism for updating local widget state. A StatefulWidget stores mutable data inside its associated State object. When that data changes, calling setState() tells Flutter that the widget needs to be rebuilt so the UI can display the latest state.
For simple interactions such as counters, checkboxes, switches, selected tabs, password visibility, expandable sections, and other widget-specific behavior, setState() is often an effective and straightforward solution. As an application grows and state needs to be shared or organized across many parts of the application, a more structured state-management approach may become appropriate.
