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.
|
| 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.
|
| 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.
Keren
ReplyDelete