Summary - Counter app
- Flutter course
- Beginner
- Lesson 95/99
- 4 min
Combine all parts and finish a working counter app.
Combine all parts
A working counter app combines three main parts: StatefulWidget (holding state), setState (rebuilding on change), and FloatingActionButton (increment button). The counter value is shown in Scaffold's body, the title is in appBar, and the increment button is in floatingActionButton.
Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(child: Text('$_count')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_count = _count + 1;
});
},
child: Icon(Icons.add),
),
)Practice Complete the working counter app
Write a function uygulamaBasladi that prints Sayac uygulamasi. Write a StatefulWidget named SayacEkrani; define an int counter variable in its State (starting at 0). In the build method, return a Scaffold with AppBar(title: Text('Sayac')) as appBar, Center(child: Text('$_sayac')) as body, and a FloatingActionButton as floatingActionButton. The FAB's onPressed increments the counter by 1 with setState, and child is Icon(Icons.add). In main call uygulamaBasladi and start with runApp.
Starter code
import 'package:flutter/material.dart';
// uygulamaBasladi fonksiyonu yaz: "Sayac uygulamasi" yazdirsin
// SayacEkrani adinda StatefulWidget yaz
// State icine bir int sayaç degiskeni tanimla (baslangic 0)
// Scaffold: appBar, body ve floatingActionButton ekle
// FAB onPressed: setState ile sayaci 1 artirsin, child Icon(Icons.add) olsun
void main() {
// uygulamaBasladi'yi cagir ve runApp ile baslat
}Sample solution
import 'package:flutter/material.dart';
void uygulamaBasladi() {
print('Sayac uygulamasi');
}
class SayacEkrani extends StatefulWidget {
const SayacEkrani({super.key});
@override
State<SayacEkrani> createState() => _SayacEkraniState();
}
class _SayacEkraniState extends State<SayacEkrani> {
int _sayac = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
),
);
}
}
void main() {
uygulamaBasladi();
runApp(const SayacEkrani());
}Expected output
Sayac uygulamasi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts does a working counter app combine?
- StatefulWidget + setState + FloatingActionButton Correct answer
- Text + Padding + Center
- AssetImage + Image.network + BoxFit
- Navigator + push + pop
Explanation: A counter app combines holding state with StatefulWidget, rebuilding with setState, and an increment button with FloatingActionButton; the other options are not for this purpose.
2 Add the floatingActionButton parameter
Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
____: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
)Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('$_sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
)Explanation: To wire a FloatingActionButton to Scaffold, the floatingActionButton parameter is used; fab, actionButton or button are not valid parameter names.
3 Counter summary
| Term | Meaning |
|---|---|
StatefulWidget |
Holds the state |
setState |
Rebuilds on change |
FloatingActionButton |
Provides increment button |
_sayac |
Counter value |