Flutter
Azalt butonu
İ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.
Örnek çözümü göster
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);
}
Kendini test et
-
Azalt butonunun Icon parametresi için hangisi kullanılır?
- Icon(Icons.menu)
- Icon(Icons.add)
- Icon(Icons.remove)
- Icon(Icons.search)
Cevabı göster
Icon(Icons.remove) — 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.
-
setState içinde azaltma
FloatingActionButton(
onPressed: () {
____(() {
_sayac = _sayac - 1;
});
},
child: Icon(Icons.remove),
)
Cevabı göster
FloatingActionButton(
onPressed: () {
setState(() {
_sayac = _sayac - 1;
});
},
child: Icon(Icons.remove),
)
-
Azalt butonu parçaları
- FloatingActionButton
- Yüzen azaltma butonu
- onPressed
- Basınca çağrılan callback
- decrement
- Bir azaltma işlemi
- Icon(Icons.remove)
- Eksi sembolü ikonu
Sıradaki ders: Özet - Sayaç uygulaması
