Flutter
Lifting state up
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.
Exercise 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.
Show example 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'),
);
}
}
Test yourself
-
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
- State is kept in child widgets and passed up to the parent
- Each child keeps its own separate copy of the state
Show answer
State is kept in the parent, callbacks are passed to children — In lifting state up, state is kept in the common parent; children report events via callbacks and the parent updates with setState.
-
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: ____);
}
}
Show answer
class Ebeveyn extends StatefulWidget {
int sayac = 0;
void artir() {
setState(() { sayac++; });
}
@override
Widget build(BuildContext context) {
return Cocuk(onArtir: artir);
}
}
-
Lifting parts
- 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
Next lesson: setState pitfalls
