Flutter: Drawer Widget ve Yan Menü Kullanımı

Drawer, aynı ekran üzerinde birden fazla sayfa göstermek için kullandığımız yan menü yapısıdır. Parmak hareketine duyarlı şekilde açılır ve kapanabilir. Geri tuşu ile de kapatılabilir.

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('Drawer Örneği')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('Menü Başlığı'),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Ana Sayfa'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Ayarlar'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
  body: Center(child: Text('İçerik')),
)

DrawerHeader

Drawer'ın üst kısmındaki başlık alanı:

DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.blue,
    image: DecorationImage(
      image: NetworkImage('https://example.com/bg.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      CircleAvatar(
        radius: 30,
        backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
      ),
      SizedBox(height: 10),
      Text('Kullanıcı Adı', style: TextStyle(color: Colors.white)),
      Text('[email protected]', style: TextStyle(color: Colors.white70)),
    ],
  ),
)

UserAccountsDrawerHeader

Kullanıcı bilgileri için hazır widget:

UserAccountsDrawerHeader(
  accountName: Text('Ahmet Balaman'),
  accountEmail: Text('[email protected]'),
  currentAccountPicture: CircleAvatar(
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  ),
  decoration: BoxDecoration(color: Colors.blue),
  otherAccountsPictures: [
    CircleAvatar(child: Text('AB')),
  ],
)

Programatik Açma/Kapama

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

Scaffold(
  key: _scaffoldKey,
  drawer: Drawer(...),
  body: ElevatedButton(
    onPressed: () {
      _scaffoldKey.currentState?.openDrawer();
    },
    child: Text('Drawer Aç'),
  ),
)

// Kapatmak için
Navigator.pop(context);
// veya
_scaffoldKey.currentState?.closeDrawer();

EndDrawer (Sağ Taraf)

Scaffold(
  endDrawer: Drawer(
    child: ListView(...),
  ),
  appBar: AppBar(
    actions: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          _scaffoldKey.currentState?.openEndDrawer();
        },
      ),
    ],
  ),
)

Önemli Özellikler

Özellik	Açıklama
drawer	Sol taraf drawer
endDrawer	Sağ taraf drawer
drawerScrimColor	Arka plan karartma rengi
drawerEdgeDragWidth	Kaydırma hassasiyeti
drawerEnableOpenDragGesture	Kaydırma ile açmayı aktif/pasif yap

Drawer Genişliği

Drawer(
  width: 250, // Özel genişlik
  child: ...
)

Özet

• Drawer: Sol yan menü
• EndDrawer: Sağ yan menü
• DrawerHeader: Üst başlık alanı
• UserAccountsDrawerHeader: Kullanıcı bilgileri için
• Navigator.pop(): Drawer'ı kapatır

Drawer, uygulamanızda geniş navigasyon seçenekleri sunmak için idealdir.