setState e InheritedWidget
Apprenda le basi della gestione dello stato locale con `setState` e comprenda il concetto di `InheritedWidget` per trasferire dati lungo l'albero dei widget.
setState e InheritedWidget è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
What is State Management?
In Flutter, 'state' refers to any data that can change during the lifetime of a widget. This could be a counter value, user input, or data fetched from the internet.
Managing this changing data, or 'state,' is crucial for building dynamic and interactive mobile applications. We need ways to update the UI when data changes.
Local State with setState
For changes that only affect a single widget, or a small, self-contained part of it, setState is your primary tool. It's used within a StatefulWidget.
Calling setState(() { ... }); tells Flutter that the internal state of this widget has changed and that it needs to rebuild its UI to reflect the new data.
setState in Action: Counter App
Let's build a simple counter. Notice how calling _incrementCounter() updates the _counter variable inside setState, which then triggers the UI to rebuild and show the new count.
import 'package:flutter/material.dart';
class MyCounterApp extends StatefulWidget {
@override
_MyCounterAppState createState() => _MyCounterAppState();
}
class _MyCounterAppState extends State<MyCounterApp> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('setState Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
void main() {
runApp(MaterialApp(home: MyCounterApp()));
}How setState Triggers Rebuilds
When setState is called, Flutter marks the StatefulWidget as 'dirty' and schedules a rebuild for that widget and its descendants.
Crucially, setState only rebuilds the part of the widget tree rooted at the StatefulWidget where it was called, not the entire application. This helps keep your UI updates efficient.
Limitations: The Problem of Prop Drilling
While setState is great for local state, it becomes cumbersome when you need to share state with widgets deep down the tree.
Passing data through many intermediate widgets that don't actually need it is called 'prop drilling'. It makes code harder to read, maintain, and refactor.
Introducing InheritedWidget
InheritedWidget is a special type of widget designed to efficiently pass data down the widget tree. Any child widget, no matter how deep, can access the data provided by an InheritedWidget.
This solves the 'prop drilling' problem by allowing widgets to 'inherit' data from their ancestors without explicit passing.
Building an InheritedWidget
To create an InheritedWidget, you extend the base class and define the data you want to share. It always requires a child widget, which is the subtree that can access its data.
child: The widget subtree wrapped by thisInheritedWidget.updateShouldNotify: A crucial method that tells Flutter if dependent widgets need to rebuild when theInheritedWidget's data changes.
import 'package:flutter/material.dart';
class MyThemeData extends InheritedWidget {
final Color primaryColor;
const MyThemeData({
Key? key,
required this.primaryColor,
required Widget child,
}) : super(key: key, child: child);
@override
bool updateShouldNotify(MyThemeData oldWidget) {
// Return true if the data has changed,
// so dependents rebuild.
return oldWidget.primaryColor != primaryColor;
}
}Accessing InheritedWidget Data
Child widgets retrieve data from an InheritedWidget using a static of(BuildContext context) method. This method efficiently searches up the widget tree for the nearest instance of the specified InheritedWidget.
The context.dependOnInheritedWidgetOfExactType method is commonly used within the of() method to establish a dependency.
import 'package:flutter/material.dart';
// Assume MyThemeData InheritedWidget is defined elsewhere.
// It needs a static 'of' method:
// static MyThemeData? of(BuildContext context) {
// return context.dependOnInheritedWidgetOfExactType<MyThemeData>();
// }
class MyColorDisplay extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Accessing the InheritedWidget's data using its 'of' method
final theme = MyThemeData.of(context);
return Text(
'Current color: ${theme?.primaryColor ?? 'Default'}' ,
style: TextStyle(color: theme?.primaryColor ?? Colors.black),
);
}
}Full InheritedWidget Example
Here's a complete example showing how MyThemeData provides a primary color to a deeply nested MyColorDisplay widget. Notice how MyColorDisplay accesses the data directly via MyThemeData.of(context).
import 'package:flutter/material.dart';
// 1. Our custom InheritedWidget
class MyThemeData extends InheritedWidget {
final Color primaryColor;
const MyThemeData({
Key? key,
required this.primaryColor,
required Widget child,
}) : super(key: key, child: child);
static MyThemeData? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<MyThemeData>();
}
@override
bool updateShouldNotify(MyThemeData oldWidget) {
return oldWidget.primaryColor != primaryColor;
}
}
// 2. A widget that consumes the data
class MyColorDisplay extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = MyThemeData.of(context);
return Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: theme?.primaryColor ?? Colors.grey,
borderRadius: BorderRadius.circular(8.0),
),
child: Text(
'Color Box',
style: TextStyle(color: Colors.white, fontSize: 18),
),
);
}
}
// 3. The main app structure
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('InheritedWidget App')),
body: MyThemeData( // Providing the theme data
primaryColor: Colors.deepPurple,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Data provided by InheritedWidget:'),
SizedBox(height: 20),
MyColorDisplay(), // This widget consumes the data
SizedBox(height: 20),
Text('This text is also a child.'),
],
),
),
),
),
);
}
}
void main() {
runApp(MyApp());
}setState vs. InheritedWidget
When to use which?
setState: Ideal for local, internal state changes within a singleStatefulWidget. Simple and direct.InheritedWidget: Best for sharing data efficiently with multiple widgets deep in the tree, avoiding 'prop drilling'. It's a foundational pattern for more advanced state management solutions.
They solve different problems but are both fundamental to Flutter's state management.
Quick Check: State Management
Consider the following scenarios for managing state in a Flutter application. Which statement accurately describes the primary use case for setState versus InheritedWidget?
Recap: setState & InheritedWidget
Congratulations! You've grasped two core concepts of state management in Flutter:
setState: For managing local, internal state changes within aStatefulWidget.InheritedWidget: For efficiently sharing data with widgets deep in the tree, avoiding 'prop drilling'.
These foundational patterns are key to building responsive and maintainable Flutter applications. You're now ready to explore more advanced state management solutions!
Impara Dart con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «setState e InheritedWidget» è gratuita?
Sì — il testo completo di «setState e InheritedWidget» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.
Cosa imparerò in «setState e InheritedWidget»?
Apprenda le basi della gestione dello stato locale con `setState` e comprenda il concetto di `InheritedWidget` per trasferire dati lungo l'albero dei widget. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Flutter Mobile Development?
Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «setState e InheritedWidget»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?
Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- setState e InheritedWidget
- Nozioni di base sul package Provider
- Riverpod per la gestione dello stato
- Pattern BLoC con Streams