Azalt butonu
- Flutter kursu
- Başlangıç
- Ders 94/99
- 4 dk
İkinci FAB ile sayacı azaltan callback yazarsın.
Azalt butonu
Sayacı azaltmak için ikinci bir FloatingActionButton kullanılır. Bu butonun onPressed callback'inde setState ile _sayac değişkeni 1 azaltılır. İki buton genellikle bir Row içine yerleştirilir ve FloatingActionButton için ortak bir parent kullanılır.
FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac - 1;
});
},
child: Icon(Icons.remove),
)Row ile iki buton
İki FloatingActionButton'ı Scaffold'ın floatingActionButton parametresinde göstermek için bir Row içine alınır. Row, butonları yatayda yan yana dizer; her buton kendi onPressed callback'ini taşır.
Row(
children: [
FloatingActionButton(onPressed: () {}, child: Icon(Icons.remove)),
FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
],
)Uygulama Artır ve azalt fonksiyonlarını yaz
SayacEkrani adında bir StatefulWidget yaz; State içinde bir int sayaç değişkeni tanımla (başlangıç 0). artir fonksiyonu setState ile sayacı 1 artırsın, azalt fonksiyonu setState ile sayacı 1 azaltsın. main içinde bir State örneği oluştur, önce artir'ı sonra azalt'ı çağır ve sonucu yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// SayacEkrani adinda StatefulWidget yaz
// State icine bir int sayaç degiskeni tanimla (baslangic 0)
// artir fonksiyonu: setState ile sayaci 1 artirsin
// azalt fonksiyonu: setState ile sayaci 1 azaltsin
// main icinde once artir sonra azalt cagir ve sonucu yazdir
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class SayacEkrani extends StatefulWidget {
const SayacEkrani({super.key});
@override
State<SayacEkrani> createState() => _SayacEkraniState();
}
class _SayacEkraniState extends State<SayacEkrani> {
int _sayac = 0;
void artir() {
setState(() {
_sayac = _sayac + 1;
});
}
void azalt() {
setState(() {
_sayac = _sayac - 1;
});
}
}
void main() {
final state = _SayacEkraniState();
state.artir();
state.azalt();
print(state._sayac);
}Beklenen çıktı
0
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Azalt butonunun Icon parametresi için hangisi kullanılır?
- Icon(Icons.menu)
- Icon(Icons.add)
- Icon(Icons.remove) Doğru cevap
- Icon(Icons.search)
Açıklama: Azaltma işlemini görsel olarak göstermek için Icon(Icons.remove) kullanılır; add artırma, search arama, menu menü içindir.
2 setState içinde azaltma
FloatingActionButton(
onPressed: () {
____(() {
_sayac = _sayac - 1;
});
},
child: Icon(Icons.remove),
)FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac - 1;
});
},
child: Icon(Icons.remove),
)Açıklama: Azaltma işleminin ekrana yansıması için setState çağrılır; build, refresh veya update aynı işi yapmaz.
3 Azalt butonu parçaları
| Kavram | Anlamı |
|---|---|
FloatingActionButton |
Yüzen azaltma butonu |
onPressed |
Basınca çağrılan callback |
decrement |
Bir azaltma işlemi |
Icon(Icons.remove) |
Eksi sembolü ikonu |