Summary - StatefulWidget
- Flutter course
- Beginner
- Lesson 25/99
- 4 min
Combine StatefulWidget, setState and initState to build a counter.
StatefulWidget summary
StatefulWidget is used for interfaces that change over time. createState produces a State object; this State holds the variable data. setState triggers build again after the data is updated. You set up resources in initState and clean them up in dispose. Combining the four lets you build a working counter.
class Sayac extends StatefulWidget {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}
class _SayacState extends State<Sayac> {
int deger = 0;
@override
void initState() {
super.initState();
deger = 0;
}
void artir() {
setState(() => deger++);
}
@override
Widget build(BuildContext context) {
return Text('$deger');
}
}Practice Write the Sayac class and run
First print print('sayac hazir'), then call runApp(MaterialApp(home: Sayac())). Define a Sayac class extending StatefulWidget that produces _SayacState via createState. _SayacState should extend State<Sayac>, hold int deger = 0, call super.initState() in initState, call setState in artir, and return Text('$deger') from build.
Starter code
import 'package:flutter/material.dart';
void main() {
// 'sayac hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home Sayac widget'ı olsun
}
// Sayac sınıfını tanımla
// StatefulWidget'dan extends etsin, createState ile _SayacState üretsin
// _SayacState sınıfını tanımla
// int deger = 0 alanı olsun
// initState super.initState() çağırsın
// artir metodu State'i güncelleyip build'i tetiklesin
// build metodu Text('$deger') döndürsünSample solution
import 'package:flutter/material.dart';
void main() {
print('sayac hazir');
runApp(MaterialApp(home: Sayac()));
}
class Sayac extends StatefulWidget {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}
class _SayacState extends State<Sayac> {
int deger = 0;
@override
void initState() {
super.initState();
}
void artir() {
setState(() => deger++);
}
@override
Widget build(BuildContext context) {
return Text('$deger');
}
}Expected output
sayac hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget type is used for a counter widget?
- InheritedWidget
- Builder widget
- StatelessWidget
- StatefulWidget Correct answer
Explanation: A counter holds data that changes over time, so it is written with StatefulWidget; StatelessWidget cannot hold state.
2 Stateful class definition
class Sayac extends ____ {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}class Sayac extends StatefulWidget {
const Sayac({super.key});
@override
State<Sayac> createState() => _SayacState();
}Explanation: Classes extending StatefulWidget produce a State via createState.
3 StatefulWidget combined
| Term | Meaning |
|---|---|
Sayaç |
Written with StatefulWidget |
artir metodu |
Calls setState |
deger alanı |
Stored in State |
initState/dispose |
Lifecycle pair |