Drawer (Navigation Drawer)

Özellikle Android uygulamalarda, aşağıdaki gibi bir butonu sıkça görmüşsünüzdür.

AppBar‘ın en solunda yer alan bu butona “Hamburger Button” denir ve tıklandığında aşağıdaki gibi bir panel açılır.

Bu panelin adı genelde “Navigation Drawer” olarak geçer ve “native” programlama yaparken bu yapıyı oluşturmak biraz zorlu bir iştir. Flutter’da ise bu yapıyı oluşturmanın tahmin ettiğinizden çok daha kolay olduğunu söyleyebilirim.

İlk olarak bu yapının Flutter’da “NavigationDrawer” olarak değil, sadece “Drawer” adıyla anıldığını belirtelim. Bir Drawer oluşturmak içinse tek yapmamız gereken Scaffold‘un “drawer” parametresini kullanmaktır. Daha önce bize defalarca pratiklik sağlayan Scaffold parametreleri bu konuda da yardımımıza koşuyor.

ana_sayfa.dart


import 'package:flutter/material.dart';

class AnaSayfa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: _buildBody(),
      drawer: _buildDrawer(context),
    );
  }

  Widget _buildAppBar() {
    return AppBar(
      title: Text("Ana Sayfa"),
    );
  }

  Widget _buildBody() {
    return Center(
      child: Text(
        "Ana Sayfa",
        style: TextStyle(fontSize: 36),
      ),
    );
  }

  Widget _buildDrawer(BuildContext context) {
    return Drawer();
  }
}

Buraya kadar hemen hemen hiçbir şey yapmadık. “build” fonksiyonundaki kodları nasıl parçalayacağımızı görmüştük ve artık her bir widget’ı ayrı bir fonksiyonda oluşturuyorduk. Burada da aynı yöntemi uyguladık ve Drawer‘ı “_buildDrawer” isminde ayrı bir fonksiyonda oluşturup Scaffold‘un “drawer” parametresine “_buildDrawer” fonksiyonunun döndürdüğü değeri atadık. İşlem bu kadar basit, boş bir Drawer oluşturduk bile. Daha şimdiden AppBar‘ın sol tarafında otomatik olarak bir “Hamburger Button” oluştu ve tıkladığımızda aşağıdaki panel açılıyor.

Görüldüğü gibi panelimiz henüz boş. Şimdi “_buildDrawer” içinde panelimizi adım adım tasarlayalım.

İlk olarak paneli ikiye böleceğiz. Üst kısımdaki gri alana “Drawer Header” denir ve DrawerHeader widget’ını kullanarak istediğimiz şekilde tasarlayabiliriz. Bizim örneğimizde, üst tarafta gri bir alan ve onun içinde bir resim, altında başlık niteliği taşıyan bir yazı ve onun altında daha küçük bir yazı görüyoruz. Bu oldukça yaygın bir kullanımdır ve genellikle giriş yapmış kullanıcının bilgileri burada gösterilir. O yüzden Flutter içinde bu yapıyı otomatik olarak oluşturan UserAccountsDrawerHeader isminde özel bir widget vardır. Biz de bu widget’ı kullanacağız.

ana_sayfa.dart


Widget _buildDrawer(BuildContext context) {
  return Drawer(
    child: UserAccountsDrawerHeader(
      currentAccountPicture: FlutterLogo(),
      accountName: Text("Flutter"),
      accountEmail: Text("https://flutter.dev"),
      decoration: BoxDecoration(
        color: Colors.grey,
      ),
    ),
  );
}

Resim istenen yere FlutterLogo widget’ını verdik. FlutterLogo, başlı başına bir widget’tır ve ihtiyacımız olduğunda, örneğin buradaki gibi örnek uygulama yaparken, örnek bir resim aramakla uğraşmak yerine basitçe Flutter logosunu kullanabilmemizi sağlar. “accountName” parametresinin temsil ettiği kısım başlık kısmıdır. Normalde buraya kullanıcının ismi veya kullanıcı adı gelir. “accountEmail” ise alttaki detay yazısıdır. Buraya da normalde kullacının e-posta adresi gelir. Ancak bu kısımlara mutlaka isim ve e-posta gireceğiz diye bir kısıtlama bulunmuyor, bu parametrelere istediğimiz widget’ı değer olarak verebiliriz. “BoxDecoration” sınıfından bir nesneyi “decoration” parametresine atayarak arka plan rengini de ayarlıyoruz. Ulaştığımız ekran görüntüsü aşağıdaki gibi olacaktır.

Tabii ki bu bizim istediğimiz görüntü değil ama adım adım ilerliyoruz. Aslında böyle bir görüntüyle karşılaşmamız gayet normal, çünkü Drawer‘a “child” olarak sadece UserAccountsDrawerHeader verdik. Ulaşmaya çalıştığımız ekran görüntüsünde olduğu gibi, bu “Header”ın altına yeni öğeler eklemek istiyoruz. Bunu yapmak için de ilk olarak UserAccountsDrawerHeader‘ı ListView ile sarmalayalım.

ana_sayfa.dart


Widget _buildDrawer(BuildContext context) {
  return Drawer(
    child: ListView(
      children: [
        UserAccountsDrawerHeader(
          currentAccountPicture: FlutterLogo(),
          accountName: Text("Flutter"),
          accountEmail: Text("https://flutter.dev"),
          decoration: BoxDecoration(
            color: Colors.grey,
          ),
        ),
      ],
    ),
  );
}

Bunu yapar yapmaz istediğimiz ekran görüntüsünü elde edeceğiz.

Aslında yapacaklarımız bu kadar. Geriye sadece “Header”ın altına ListTile olarak liste elemanlarını eklemek kaldı.

ana_sayfa.dart


Widget _buildDrawer(BuildContext context) {
  return Drawer(
    child: ListView(
      children: [
        UserAccountsDrawerHeader(
          currentAccountPicture: FlutterLogo(),
          accountName: Text("Flutter"),
          accountEmail: Text("https://flutter.dev"),
          decoration: BoxDecoration(
            color: Colors.grey,
          ),
        ),
        ListTile(
          title: Text('Mesajlar'),
          subtitle: Text("Mesajlarınızı okuyun"),
          leading: Icon(Icons.question_answer),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Ayarlar'),
          subtitle: Text("Uygulamayı kişiselleştirin"),
          leading: Icon(Icons.settings),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  );
}

Hepsi bu kadar, Drawer‘ımız hazır. ListTile‘lara tıklandığında ne olacağını istediğiniz gibi belirleyebilirsiniz. Biz burada tıklama olduğunda “Navigator.pop()” ile sadece panelin kapanmasını sağladık ama siz istediğiniz işlevi uygulayabilir, örneğin başka bir ekrana geçilmesini sağlayabilirsiniz.

Son olarak, ufak bir detay kaldı. Drawer‘ın üst kısmı aşağıdaki resimde olduğu gibi açık renkte görünüyor.

Aksine, bu üst kısım tıpkı aşağıdaki resimde olduğu gibi, alt kısımdan daha koyu tonda olmalıdır.

Bu istenmeyen durumun oluşma sebebi, Drawer içindeki ListView‘ın bir miktar “padding”e sahip olmasıdır. Öyleyse ListView‘ın “padding” değerini sıfır (zero) olarak ayarlayalım.

ana_sayfa.dart


Widget _buildDrawer(BuildContext context) {
  return Drawer(
    child: ListView(
      padding: EdgeInsets.zero,

Böylece istediğimiz sonuca ulaşmış olacağız. Kodun tamamlanmış hali aşağıdadır.

ana_sayfa.dart


import 'package:flutter/material.dart';

class AnaSayfa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: _buildBody(),
      drawer: _buildDrawer(context),
    );
  }

  Widget _buildAppBar() {
    return AppBar(
      title: Text("Ana Sayfa"),
    );
  }

  Widget _buildBody() {
    return Center(
      child: Text(
        "Ana Sayfa",
        style: TextStyle(fontSize: 36),
      ),
    );
  }

  Widget _buildDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            currentAccountPicture: FlutterLogo(),
            accountName: Text("Flutter"),
            accountEmail: Text("https://flutter.dev"),
            decoration: BoxDecoration(
              color: Colors.grey,
            ),
          ),
          ListTile(
            title: Text('Mesajlar'),
            subtitle: Text("Mesajlarınızı okuyun"),
            leading: Icon(Icons.question_answer),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Ayarlar'),
            subtitle: Text("Uygulamayı kişiselleştirin"),
            leading: Icon(Icons.settings),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

Navigation Drawer‘ın (ya da Flutter’daki ismiyle Drawer‘ın) projemize nasıl kolayca dahil edildiğini görmüş olduk. Tek başına bu uygulama bile Flutter’ın diğer teknolojilere göre ne kadar pratik olduğunun açık bir göstergesidir.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir