Scaffold nedir?
- Flutter kursu
- Başlangıç
- Ders 81/99
- 4 dk
Scaffold'ın uygulama ekranının iskeleti olduğunu öğrenirsin.
Scaffold nedir?
Scaffold, bir Material uygulama ekranının iskeletini oluşturan widget'tır. Üst başlık çubuğu (appBar), ana içerik alanı (body), yüzen buton (floatingActionButton) ve yan menü (drawer) gibi bölümleri tanımlamanı sağlar. Çoğu ekranda kök widget olarak Scaffold kullanılır.
Scaffold(
appBar: AppBar(title: Text('Baslik')),
body: Center(child: Text('Merhaba')),
)appBar ve body birlikte
Tipik bir Scaffold hem appBar hem body parametrelerini alır. appBar, üstte sabit bir başlık çubuğu gösterir; body ise geri kalan alanı doldurur. İkisi birlikte ekranda üst başlık ve altında içerik biçiminde görünür.
Scaffold(
appBar: AppBar(title: Text('Uygulama')),
body: Center(child: Text('Icerik')),
)Uygulama Scaffold ile appBar ve body ekle
kur adında bir fonksiyon yaz; çağrılınca Scaffold kuruldu yazdırsın. main içinde kur'u çağır. Scaffold'a hem appBar hem body parametrelerini ver; appBar'da AppBar(title: Text('Baslik')), body'de Center(child: Text('Merhaba')) olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
// kur fonksiyonu yaz: "Scaffold kuruldu" yazdirsin
void main() {
// kur'u cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// appBar ve body parametrelerini ekle
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void kur() {
print('Scaffold kuruldu');
}
void main() {
kur();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Baslik')),
body: Center(child: Text('Merhaba')),
),
);
}
}Beklenen çıktı
Scaffold kuruldu
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Scaffold'ın body parametresi ne için kullanılır?
- Üst başlık çubuğunu belirler
- Yan menüyü belirler
- Yüzen butonu belirler
- Ana içerik alanını belirler Doğru cevap
Açıklama: body parametresi Scaffold'ın ana içerik alanını belirler; üst başlık appBar, yan menü drawer, yüzen buton floatingActionButton içindir.
2 body parametresini ekle
Scaffold(
appBar: AppBar(title: Text('Baslik')),
____: Center(child: Text('Merhaba')),
)Scaffold(
appBar: AppBar(title: Text('Baslik')),
body: Center(child: Text('Merhaba')),
)Açıklama: Scaffold'ın ana içerik alanı body parametresi ile verilir; content, main veya child geçerli parametre adları değildir.
3 Scaffold parçaları
| Kavram | Anlamı |
|---|---|
Scaffold |
Ekran iskeletini oluşturur |
appBar |
Üst başlık çubuğu |
body |
Ana içerik alanı |
MaterialApp |
Scaffold'ı sarmalayan kök widget |