Flutter Design – Menambahkan Drawer Pada Aplikasi

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Animasi Fade In Out Pada Widget

Seperti yang kita ketahui, aplikasi yang menggunakan Desain Material umumnya memiliki 2 opsi utama untuk navigasinya: tabs dan drawers. Jika tidak ada cukup ruang untuk mendukung tabs, drawers merupakan solusi praktisnya.

Di Flutter, kita akan gunakan widget Drawer yang dikombinasikan dengan Scaffold untuk membuat layout dengan drawer yang dimiliki oleh Material Design. Berikut langkah-langkah yang akan dibahas pada artikel ini:

1. Membuat Scaffold.
2. Menambahkan drawer.
3. Mengisi drawer dengan beberapa item.
4. Menutup drawer secara terprogram.

1. Membuat Scaffold

Untuk menambahkan drawer ke aplikasi, maka bungkus drawer tersebut ke dalam widget  Scaffold. Widget Scaffold sendiri menyediakan struktur visual yang konsisten untuk aplikasi yang mengacu pada Material Design Guidelines, selain itu widget Scaffold juga mendukung komponen special Material Design, seperti Drawers, AppBars, dan SnackBars.

Scaffold(
  drawer: // Add a Drawer here in the next step.
);

2. Menambahkan Drawer

Sekarang tambahkan drawer ke Scaffold. Drawer sendiri dapat berupa widget apa saja, tetapi yang umumnya digunakan dan yang terbaik yaitu menggunakan widget drawer dari material library, yang sesuai dengan spesifikasi Material Design.

Scaffold(
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  )
);

3. Mengisi Drawer Dengan Beberapa Item

Sekarang setelah kita memiliki Drawer, tambahkan konten ke dalamnya. Untuk contoh ini, kita akan menggunakan ListView. Meskipun sebenarnya kita dapat menggunakan widget Column, namun ListView dalam hal ini berguna karena memungkinkan pengguna dalam melakukan scroll melalui drawer jika konten membutuhkan lebih banyak space.

Selanjutnya kita isi ListView dengan DrawerHeader dan 2 widget ListTile. Untuk informasi lebih lanjut tentang Lists, klik link berikut ➡ list recipes.

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('Drawer Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

4. Menutup Drawer Secara Terprogram

Setelah pengguna mengetuk item, pasti pengguna mungkin ingin menutup drawer-nya kembali. Dalam hal ini, kita menggunakan Navigator. Jadi saat pengguna membuka drawer lalu mengetuk salah satu item, maka Flutter akan secara otomatis menutup drawer tersebut ke navigation stack. Oleh karena itu, untuk menutup drawer, kita akan panggil  Navigator.pop(context).

ListTile(
  title: Text('Item 1'),
  onTap: () {
    // Update the state of the app.
    // ...
    // Then close the drawer.
    Navigator.pop(context);
  },
),

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, maka berikut hasil akhirnya (Klik ikon list dan klik salah satu icon):

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Anton Prafanto

Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda

all author posts