Özet - Scaffold ve AppBar
- Flutter kursu
- Başlangıç
- Ders 85/99
- 4 dk
Scaffold, AppBar ve FAB'ı birleştirerek ana ekran yaparsın.
Üç parçayı birleştir
Bir ana ekran yapmak için üç parçayı birleştirirsin: Scaffold (iskelet), AppBar (üst başlık) ve FloatingActionButton (yüzen buton). Scaffold'ın appBar parametresine AppBar, body parametresine içerik ve floatingActionButton parametresine FAB verilir.
Scaffold(
appBar: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Uygulama Ana ekran yap
anaEkran adında bir fonksiyon yaz; çağrılınca Ana ekran yazdırsın. main içinde anaEkran'ı çağır. Scaffold'a appBar (AppBar, title Text('Ana')), body (Center(child: Text('Merhaba'))) ve floatingActionButton (onPressed anaEkran, child Icon(Icons.add)) ekle.
Başlangıç kodu
import 'package:flutter/material.dart';
// anaEkran fonksiyonu yaz: "Ana ekran" yazdirsin
void main() {
// anaEkran'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// appBar, body ve floatingActionButton ekle
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void anaEkran() {
print('Ana ekran');
}
void main() {
anaEkran();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Ana')),
body: Center(child: Text('Merhaba')),
floatingActionButton: FloatingActionButton(
onPressed: anaEkran,
child: Icon(Icons.add),
),
),
);
}
}Beklenen çıktı
Ana ekran
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Ana ekran yapmak için hangi parçalar bir arada kullanılır?
- ListView + ListTile + Separator
- Scaffold + AppBar + FloatingActionButton Doğru cevap
- AssetImage + Image.network + BoxFit
- Text + Padding + Center
Açıklama: Ana ekran için Scaffold iskelet, AppBar üst başlık ve FloatingActionButton yüzen eylem birlikte kullanılır; diğer seçenekler bu amaca yönelik değildir.
2 appBar parametresini ekle
Scaffold(
____: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Scaffold(
appBar: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Açıklama: AppBar'ı Scaffold'a bağlamak için appBar parametresi kullanılır; header, topBar veya title geçerli parametre adları değildir.
3 Scaffold özeti
| Kavram | Anlamı |
|---|---|
Scaffold |
Ekran iskeletini oluşturur |
AppBar |
Üst başlık çubuğu widget'ı |
FloatingActionButton |
Yüzen yuvarlak buton |
body |
Ana içerik alanı |