Artır butonu
- Flutter kursu
- Başlangıç
- Ders 93/99
- 4 dk
FloatingActionButton ile sayacı artıran callback yazarsın.
Artır butonu
Sayacı artırmak için Scaffold'ın floatingActionButton parametresine bir FloatingActionButton verilir. Butonun onPressed callback'inde setState ile _sayac değişkeni 1 artırılır ve ekran yeniden çizilir.
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
),
)Icon ile ekle göstergesi
FloatingActionButton'ın child parametresine genellikle bir Icon verilir. Artırma işlemi için Icon(Icons.add) kullanılır. Bu, kullanıcıya butonun artırma eylemi yaptığını görsel olarak bildirir.
Uygulama Artır butonunu hazırla
artirMesaj adında bir fonksiyon yaz; çağrılınca Artir butonu hazir yazdırsın. SayacEkrani adında bir StatefulWidget yaz; State içinde bir int sayaç değişkeni tanımla (başlangıç 0). build metodunda Scaffold'a bir FloatingActionButton ekle; onPressed setState ile sayacı 1 artırsın, child artı sembolü ikonu olsun. main içinde artirMesaj'ı çağır ve runApp ile SayacEkrani'yı başlat.
Başlangıç kodu
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
}Örnek çözüm
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());
}Beklenen çıktı
Artir butonu hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FloatingActionButton'ın onPressed'ında ne yapılır?
- Uygulama kapatılır
- AppBar gizlenir
- Yeni ekran açılır
- Sayac setState içinde 1 artırılır Doğru cevap
Açıklama: Artır butonunun onPressed'ında setState içinde sayacı 1 artırmak gerekir; ekran açma, uygulama kapatma veya AppBar gizleme bu amaca yönelik değildir.
2 setState içinde artırma
FloatingActionButton(
onPressed: () {
____(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
)FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac + 1;
});
},
child: Icon(Icons.add),
)Açıklama: Artırma işleminin ekrana yansıması için setState çağrılır; build, refresh veya update aynı işi yapmaz.
3 Artır butonu parçaları
| Kavram | Anlamı |
|---|---|
FloatingActionButton |
Yüzen artırma butonu |
onPressed |
Basınca çağrılan callback |
setState |
Ekranı yeniden çizer |
Icon(Icons.add) |
Artı sembolü ikonu |