Increment button
- Flutter course
- Beginner
- Lesson 93/99
- 4 min
Write an increment callback on FloatingActionButton.
Increment button
To increment the counter, a FloatingActionButton is given to the floatingActionButton parameter of Scaffold. In the button's onPressed callback, the _count variable is incremented by 1 with setState and the screen is rebuilt.
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_count = _count + 1;
});
},
child: Icon(Icons.add),
),
)Add indicator with Icon
An Icon is usually given to the child parameter of FloatingActionButton. For incrementing, Icon(Icons.add) is used. This visually tells the user that the button performs an increment action.
Practice Prepare the increment button
Write a function artirMesaj that prints Artir butonu hazir. Write a StatefulWidget named SayacEkrani; define an int counter variable in its State (starting at 0). In the build method, add a FloatingActionButton to the Scaffold; let onPressed increment the counter by 1 with setState, and child be the plus icon. In main call artirMesaj and start SayacEkrani with runApp.
Starter code
import 'package:flutter/material.dart';
// artirMesaj fonksiyonu yaz: "Artir butonu hazir" yazdirsin
// SayacEkrani adinda StatefulWidget yaz
// State icine bir int sayaç degiskeni tanimla (baslangic 0)
// Scaffold'a FloatingActionButton ekle
// onPressed: setState ile sayaci 1 artirsin
// child: arti sembolu ikonu olsun
void main() {
// artirMesaj'i cagir ve runApp ile baslat
}Sample solution
import 'package:flutter/material.dart';
void artirMesaj() {
print('Artir butonu hazir');
}
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(
body: Center(child: Text('$_sayac')),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
),
);
}
}
void main() {
artirMesaj();
runApp(const SayacEkrani());
}Expected output
Artir butonu hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is done in the FloatingActionButton's onPressed?
- The app is closed
- The AppBar is hidden
- A new screen is opened
- Counter is incremented by 1 inside setState Correct answer
Explanation: In the increment button's onPressed, the counter should be incremented by 1 inside setState; opening a screen, closing the app or hiding the AppBar are not for this purpose.
2 Increment inside setState
FloatingActionButton(
onPressed: () {
____(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
)FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
)Explanation: For the increment to reflect on screen, setState is called; build, refresh or update do not do the same.
3 Increment button parts
| Term | Meaning |
|---|---|
FloatingActionButton |
Floating increment button |
onPressed |
Callback called on press |
setState |
Rebuilds the screen |
Icon(Icons.add) |
Plus symbol icon |