Özet - Scaffold ve AppBar

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.

Örnek çözümü göster

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),
        ),
      ),
    );
  }
}

Kendini test et

Ana ekran yapmak için hangi parçalar bir arada kullanılır?
- ListView + ListTile + Separator
- Scaffold + AppBar + FloatingActionButton
- AssetImage + Image.network + BoxFit
- Text + Padding + Center
Cevabı göster

Scaffold + AppBar + FloatingActionButton — 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.

appBar parametresini ekle

Scaffold(
  ____: AppBar(title: Text('Ana')),
  body: Center(child: Text('Icerik')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Cevabı göster

Scaffold(
  appBar: AppBar(title: Text('Ana')),
  body: Center(child: Text('Icerik')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Scaffold özeti

Scaffold

Ekran iskeletini oluşturur
AppBar

Üst başlık çubuğu widget'ı
FloatingActionButton

Yüzen yuvarlak buton
body

Ana içerik alanı

Sıradaki ders: Navigator nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler