Lifting state up
- Flutter course
- Intermediate
- Lesson 2/99
- 4 min
Lift state to a common ancestor to share it.
Lifting state up
When two sibling widgets need to share the same state, you move the state up to their common parent. This is known as lifting state up.
class Parent extends StatefulWidget {
// keep counter here
// give callbacks to children
}The parent holds the state, children only display and report events.
Callback pattern
The parent passes a callback to its children through their constructor. The child calls this callback when its button is pressed; the parent updates the state with setState.
Increaser(
onIncrement: () {
setState(() { _count++; });
},
)This way children can stay stateless.
Practice Parent holds, child displays
In the Ebeveyn stateful widget, hold a _sayac variable. The _artir method should increment _sayac with setState. In initState, call print('ebeveyn hazır'). Complete the Goruntuleyici and Artirici stateless widgets: Artirici should take an onArtir callback and call it when the button is pressed.
Starter code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ebeveyn());
}
}
class Ebeveyn extends StatefulWidget {
@override
_EbeveynState createState() => _EbeveynState();
}
class _EbeveynState extends State<Ebeveyn> {
int _sayac = 0;
// initState ekle: print('ebeveyn hazır')
void _artir() {
// setState ile _sayac'ı artır
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Goruntuleyici(deger: _sayac),
// onArtir: _artir ile Artirici
Artirici(),
],
),
),
);
}
}
class Goruntuleyici extends StatelessWidget {
final int deger;
Goruntuleyici({required this.deger});
@override
Widget build(BuildContext context) {
return Text('$deger', style: TextStyle(fontSize: 48));
}
}
class Artirici extends StatelessWidget {
// onArtir field'ını ekle
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
child: Text('Artır'),
);
}
}Sample solution
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ebeveyn());
}
}
class Ebeveyn extends StatefulWidget {
@override
_EbeveynState createState() => _EbeveynState();
}
class _EbeveynState extends State<Ebeveyn> {
int _sayac = 0;
@override
void initState() {
super.initState();
print('ebeveyn hazır');
}
void _artir() {
setState(() {
_sayac++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Goruntuleyici(deger: _sayac),
Artirici(onArtir: _artir),
],
),
),
);
}
}
class Goruntuleyici extends StatelessWidget {
final int deger;
Goruntuleyici({required this.deger});
@override
Widget build(BuildContext context) {
return Text('$deger', style: TextStyle(fontSize: 48));
}
}
class Artirici extends StatelessWidget {
final VoidCallback onArtir;
Artirici({required this.onArtir});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onArtir,
child: Text('Artır'),
);
}
}Expected output
ebeveyn hazır
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is true in the lifting state up pattern?
- State is made global with GlobalKey
- State is kept in the parent, callbacks are passed to children Correct answer
- State is kept in child widgets and passed up to the parent
- Each child keeps its own separate copy of the state
Explanation: In lifting state up, state is kept in the common parent; children report events via callbacks and the parent updates with setState.
2 Pass the callback to the child
class Ebeveyn extends StatefulWidget {
int sayac = 0;
void artir() {
setState(() { sayac++; });
}
@override
Widget build(BuildContext context) {
return Cocuk(onArtir: ____);
}
}class Ebeveyn extends StatefulWidget {
int sayac = 0;
void artir() {
setState(() { sayac++; });
}
@override
Widget build(BuildContext context) {
return Cocuk(onArtir: artir);
}
}Explanation: The parent passes the increment job to the child widget as the artir callback; the child only calls this callback.
3 Lifting parts
| Term | Meaning |
|---|---|
Lifting state up |
Moving state to the common parent |
Callback |
Child notifying parent of events |
Stateless child |
Child widget that holds no state |
Constructor parametresi |
Where the child receives the callback |