Flutter: AppBar Widget ve Özelleştirme

AppBar, sayfanın en üstünde bulunan ve varsayılan olarak her Scaffold'da gelen bir widget'tır. Başlık, navigasyon butonları ve eylem butonları içerebilir.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Temel Kullanım

Scaffold(
  appBar: AppBar(
    title: Text('Sayfa Başlığı'),
  ),
  body: Center(child: Text('İçerik')),
)

Önemli Özellikler

Özellik	Açıklama
title	Başlık widget'ı
leading	Sol taraftaki widget (genellikle geri butonu)
actions	Sağ taraftaki butonlar listesi
backgroundColor	Arka plan rengi
foregroundColor	İkon ve yazı rengi
elevation	Gölge miktarı
centerTitle	Başlığı ortala
automaticallyImplyLeading	Otomatik geri butonu

Actions Kullanımı

AppBar(
  title: Text('Başlık'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

Leading Özelleştirme

AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // Drawer aç
    },
  ),
  title: Text('Başlık'),
)

Arama Çubuğu Entegrasyonu

AppBar(
  title: TextField(
    decoration: InputDecoration(
      hintText: 'Ara...',
      border: InputBorder.none,
      prefixIcon: Icon(Icons.search),
    ),
  ),
)

Gradient AppBar

AppBar(
  title: Text('Gradient'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.purple, Colors.blue],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
)

SliverAppBar

Kaydırma ile küçülen/büyüyen AppBar:

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Başlık'),
        background: Image.network(
          'https://example.com/image.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Öğe $index')),
        childCount: 50,
      ),
    ),
  ],
)

Özet

• AppBar: Sayfa üst çubuğu
• title: Başlık widget'ı
• leading: Sol taraf (geri butonu, menü)
• actions: Sağ taraf butonları
• SliverAppBar: Kaydırılabilir AppBar

AppBar, uygulamanızın navigasyonunu yönetmek için temel bir bileşendir.