Cara Membuat Sidebar Menu atau Drawer Lengkap di Flutter

Share:
Cara Membuat SIdebar Menu atau Drawer Lengkap di Flluter
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat sidebar menu atau drawer secara lengkap di flutter. Penasaran?, ayo ikuti selengkapnya di bawah ini.


Drawer

Drawer adalah menu yang yang berada di sebalah kiri layar android. Biasanya drawer akan muncul saat kita menekan icon menu yang berada di kiri atas appbar. Sedangkan di website, drawer bisa kita sebut juga dengan sidebar menu. Untuk membuat sidebar menu di flutter caranya cukup mudah. Berikut ini saya berikan gambar drawer yang akan kita buat beserta istilah-istilah di dalamnya.

cara membuat drawable di flutter
Struktur Drawable yang Dibuat


Ok saya kira gambar di atas sudah cukup jelas menggambarkan apa yang akan kita buat pada tutorial kali ini. Di tutorial kali ini juga kita akan belajar beberapa widget dasar seperti image network, list view, text, dan list tile. Dan untuk hasil akhirnya kalian bisa langsung scroll ke bagian bawah pada artikel ini.


Cara Membuat Drawer atau Sidebar Menu di Flutter

1. Pertama silahkan kalian buat project flutter terlebih dahulu. Buka visual studio code tekan ctrl + shift + P → create new flutter project → pilih folder → dan beri nama project "latihan_drawer_flutter".

2. Buka file main.dart. Lalu ganti script di dalamnya dengan script yang ada di bawah ini. Untuk penjelasan, sudah saya tulis di dalam script dan di dalam tabel penjelas.
    

import 'package:flutter/material.dart'; void main(){ runApp( MaterialApp( title: "Latihan Drawable Flutter", //menghilangkan debug banner debugShowCheckedModeBanner: false, home: HomePage(), ) ); } class HomePage extends StatefulWidget { const HomePage({ Key? key }) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter Drawer"), ), body: Center( child: Text( "Ini halaman utama, kalian bebas memberikan widget" ), ), //memberikan button garis tiga disebelah kiri appbar //jika ditekan akan menjalankan widget builddrawer drawer: _buildDrawer(), ); } } //widget ini adalah isi dari sidebar atau drawer Widget _buildDrawer() { return SizedBox( //membuat menu drawer child: Drawer( //membuat list, //list digunakan untuk melakukan scrolling jika datanya terlalu panjang child: ListView( padding: EdgeInsets.zero, //di dalam listview ini terdapat beberapa widget drawable children: [ UserAccountsDrawerHeader( //membuat gambar profil currentAccountPicture: Image( image: NetworkImage("https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png") ), //membuat nama akun accountName: Text("Sahretech"), //membuat nama email accountEmail: Text("ig: @sahretech"), //memberikan background decoration: BoxDecoration( image: DecorationImage( image: NetworkImage("https://cdn.pixabay.com/photo/2016/04/24/20/52/laundry-1350593_960_720.jpg"), fit: BoxFit.cover ) ), ), //membuat list menu ListTile( leading: Icon(Icons.home), title: Text("Beranda"), onTap: (){},), ListTile( leading: Icon(Icons.people), title: Text("Pegawai"), onTap: (){},), ListTile( leading: Icon(Icons.money), title: Text("Transaksi"), onTap: (){},), Divider(), ListTile( leading: Icon(Icons.emoji_emotions), title: Text("Profil"), onTap: (){},), ListTile( leading: Icon(Icons.info), title: Text("Tentang"), onTap: (){},), ], ), ), ); }


Tabel Penjelas

# Syntax/Script Keterangan
1 drawer: ..... Memberikan button berbentuk icon garis tiga di pojok kiri atas. Kalian bisa mengisinya dengan widget drawer, jika ditekan maka akan memunculkan drawer
2 Widget _buildDrawer() { ..... } Membuat custom widget, widget ini dapat kita gunakan berkali-kali sehingga lebih hemat waktu dalam penkodingan
3 Drawer(.....) Untuk membuat drawer kita perlu memasang widget ini. Lalu di dalamnya ada banyak widget yang dapat kita gunakan sesuai selera
4 ListView(.....) Listview adalah pilihan opsional, tapi digunakan jika menu yang dibuat melebihi ukuran layar android Pembahasan list view bisa kalian di tutorial ini https://www.sahretech.com/2022/02/cara-menggunakan-list-view-builder-di.html
5 UserAccountsDrawerHeader(.....) Untuk membuat bagian header drawer terdapat beberapa properti
6 currentAccountPicture: Untuk membuat gambar profil
7 AccountName: Untuk memberikan nama akun
8 AccountEmail: Untuk memberikan nama email
9 decoration: BoxDecoration(.....) Digunakan untuk memberikan dekorasi pada draser header, dalam hal ini saya memberikan gambar latar
10 ListTile(.....) Membuat list dengan mudah, kita bisa menambahkan icon, teks, sub teks, dan memberikan aksi onTap: Pembahasan listTile bisa kalian di tutorial ini https://www.sahretech.com/2022/02/menggunakan-list-view-builder-get-data.html


3. Ok, semua step sudah kita kerjakan, sekarang waktunya melakukan uji coba. Silahkan jalankan project kalian masing-masing, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Flutter Drawer Menu
Hasil Akhir



Keren!, sekarang kalian sudah bisa membuat drawer, tinggal lakukan improvisasi pada apa yang sudah kalian pelajari dengan menggabungkan widget-widget yang ada di flutter. Kunjungi artikel tutorial flutter lainnya di link berikut ini.


Ok sekian dari saya kali ini tentang cara membuat sidebar menu atau drawer pada flutter. Semoga bermanfaat, jika ada pertanyaan silahkan tanya langsung di kolom komentar di bawah ini atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.

1 comment:

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik