FloatingActionButton
- Flutter kursu
- Başlangıç
- Ders 83/99
- 4 dk
FloatingActionButton ile yüzen eylem butonu eklemeyi öğrenirsin.
FloatingActionButton nedir?
FloatingActionButton, Scaffold'ın sağ alt köşesinde yüzen yuvarlak bir butondur. onPressed parametresine bir callback, child parametresine ise genellikle bir Icon verilir. Scaffold'ın floatingActionButton parametresine bağlanır.
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)onPressed ve child
FloatingActionButton'ın onPressed parametresi, butona basıldığında çağrılacak callback'i belirler. child parametresi ise butonun içinde gösterilen widget'tır; en sık bir Icon verilir. onPressed verilmezse buton devre dışı kalır.
Uygulama FloatingActionButton ekle
ekle adında bir fonksiyon yaz; çağrılınca Eklendi yazdırsın. main içinde ekle'yi çağır. Scaffold'a bir body ve bir FloatingActionButton ekle; FAB'ın onPressed'i ekle'ye, child'ı Icon(Icons.add) olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
// ekle fonksiyonu yaz: "Eklendi" yazdirsin
void main() {
// ekle'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(child: Text('Gorev')),
// floatingActionButton ekle
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void ekle() {
print('Eklendi');
}
void main() {
ekle();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(child: Text('Gorev')),
floatingActionButton: FloatingActionButton(
onPressed: ekle,
child: Icon(Icons.add),
),
),
);
}
}Beklenen çıktı
Eklendi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FloatingActionButton Scaffold'a hangi parametre ile bağlanır?
- floatingActionButton Doğru cevap
- body
- appBar
- drawer
Açıklama: FloatingActionButton, Scaffold'ın floatingActionButton parametresine bağlanır; body, appBar veya drawer bu amaca yönelik değildir.
2 floatingActionButton parametresini ekle
Scaffold(
body: Center(child: Text('Gorev')),
____: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Scaffold(
body: Center(child: Text('Gorev')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Açıklama: FloatingActionButton'ı Scaffold'a bağlamak için floatingActionButton parametresi kullanılır; fab, actionButton veya floating geçerli parametre adları değildir.
3 FAB parçaları
| Kavram | Anlamı |
|---|---|
FloatingActionButton |
Yüzen yuvarlak buton |
onPressed |
Basınca çağrılan callback |
child |
Butonun içindeki widget |
floatingActionButton |
Scaffold'ın parametresi |