Navigation Drawer merupakan menu navigasi yang tampil penuh pada sisi kanan atau kiri sebuah aplikasi. Untuk memunculkan Navigation Drawer bisa dengan cara di mengeser / swipe layar atau dengan menekan icon menu pada appBar. Pada Flutter, cara membuat navigation drawer sangat mudah yaitu hanya menggunakan widget Drawer yang dapat kita tempatkan pada properti drawer atau endDrawer di Scaffold Widget.
Dalam tutorial ini kita akan coba membuat navigation drawer dan mengenal lebih dalam mengenai Drawer widget pada sebuah aplikasi Flutter.
Daftar Isi
Mengenal Drawer Widget di Flutter
Sebelum ke tahap cara membuat navigation drawer, ada baiknya kita mengerti tentang Drawer itu sendiri. Drawer widget merupakan single child widget yang artinya hanya dapat memiliki satu child widget di dalamnya. Karena Drawer hanya memiliki properti child dan bukan children, maka untuk menampatkan item-item lain bisa menggunakan ListView widget. Sebenarnya tidak ada keharusan menggunakan ListView namun keuntungan menggunakan ListView widget dibandingkan dengan column atau widget lainnya yaitu untuk memudahkan dalam mengatur list Item dan vertical scrolling apabila item menu melebihi tinggi layar.
Anatomi Drawer
Anatomi dari sebuah navigation drawer menurut material design itu ada delapan (8) point, namun disini kita sederhanakan saja menjadi 4 bagian yaitu
- Header,
- List Item,
- Divider dan
- Subtitle
Jenis Drawer
Jenis Drawer navigasi pada flutter dibagi menjadi dua sesuai dengan letak posisi drawer itu sendiri yaitu drawer dan endDrawer. Drawer yang muncul di sebelah kiri dinamakan drawer, sedangkan apabila muncul dari sebelah kanan dinamakan endDrawer karena menggunakan properti endDrawer
Posisi icon masing-masing drawer berbeda sesuai dengan properti yang digunakan
1. Buat projek flutter baru dengan nama belajar_flutter atau gunakan projek flutter yang ada. Dalam folder lib, buat file baru bernama nav-drawer.dart
├── lib
│ ├── main.dart
│ └── nav-drawer.dart2. Buka file nav-drawer.dart dan ketikan kode dibawah ini
import 'package:flutter/material.dart';
class DrawerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
_drawerHeader(),
_drawerItem(
icon: Icons.folder,
text: 'My Files',
onTap: () => print('Tap My Files')),
_drawerItem(
icon: Icons.group,
text: 'Shared with me',
onTap: () => print('Tap Shared menu')),
_drawerItem(
icon: Icons.access_time,
text: 'Recent',
onTap: () => print('Tap Recent menu')),
_drawerItem(
icon: Icons.delete,
text: 'Trash',
onTap: () => print('Tap Trash menu')),
Divider(height: 25, thickness: 1),
Padding(
padding: const EdgeInsets.only(left: 20.0, top: 10, bottom: 10),
child: Text("Labels",
style: TextStyle(
fontSize: 16,
color: Colors.black54,
)),
),
_drawerItem(
icon: Icons.bookmark,
text: 'Family',
onTap: () => print('Tap Family menu')),
],
),
);
}
}Perhatikan fungsi _drawerHeader dan _drawerItem pada kode diatas.
- _drawerHeader : Sebuah local function yang akan me-return DrawerHeader widget
- _drawerItem : Lokal Function untuk me-return DrawerItem widget
- Divider : untuk membuat garis pemisah antar menu
- Padding dan Text digunakan untuk membuat subtitle navigation bar. Kita tidak pisahkan ke function terpisah seperti drawerHeader dan drawerItem karena bentuknya yang sederhanan dan hanya menggunakannya satu kali.
Underscore ( _ ) pada nama function untuk menandakan bahwa variable atau function tersebut merupakan lokal function atau hanya digunakan pada file ini saja.
3. masih pada file nav-drawer.dart, tambahkan function _drawerHeader() dibawah
Widget _drawerHeader() {
return UserAccountsDrawerHeader(
currentAccountPicture: ClipOval(
child: Image(
image: AssetImage('assets/images/orang1.jpeg'),
fit: BoxFit.cover),
),
otherAccountsPictures: [
ClipOval(
child: Image(
image: AssetImage('assets/images/orang2.jpg'),
fit: BoxFit.cover),
),
ClipOval(
child: Image(
image: AssetImage('assets/images/orang3.jpeg'),
fit: BoxFit.cover),
)
],
accountName: Text('Belajar Flutter'),
accountEmail: Text('[email protected]'),
);
}Header yang kita gunakan yaitu UserAccountsDrawerHeader widget dimana memiliki empat properti utama yaitu : accountName, accountEmail, currentAccountPicture, otherAccountsPictures. current dan other picture properties digunakan untuk menampilkan foto. Penjelasan cara menampilkan gambar silahkan baca disini
4. Setelah header maka selanjutnya kita buat _drawerItem widget kode nya seperti di bawah ini
Widget _drawerItem(
{IconData icon, String text, GestureTapCallback onTap}) {
return ListTile(
title: Row(
children: <Widget>[
Icon(icon),
Padding(
padding: EdgeInsets.only(left: 25.0),
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
onTap: onTap,
);
}Hasil akhir kode dari file nav-drawer.dart menjadi seperti ini
import 'package:flutter/material.dart';
class DrawerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
_drawerHeader(),
_drawerItem(
icon: Icons.folder,
text: 'My Files',
onTap: () => print('Tap My Files')),
_drawerItem(
icon: Icons.group,
text: 'Shared with me',
onTap: () => print('Tap Shared menu')),
_drawerItem(
icon: Icons.access_time,
text: 'Recent',
onTap: () => print('Tap Recent menu')),
_drawerItem(
icon: Icons.delete,
text: 'Trash',
onTap: () => print('Tap Trash menu')),
Divider(height: 25, thickness: 1),
Padding(
padding: const EdgeInsets.only(left: 20.0, top: 10, bottom: 10),
child: Text("Labels",
style: TextStyle(
fontSize: 16,
color: Colors.black54,
)),
),
_drawerItem(
icon: Icons.bookmark,
text: 'Family',
onTap: () => print('Tap Family menu')),
],
),
);
}
}
Widget _drawerHeader() {
return UserAccountsDrawerHeader(
currentAccountPicture: ClipOval(
child: Image(
image: AssetImage('assets/images/orang2.jpeg'), fit: BoxFit.cover),
),
otherAccountsPictures: [
ClipOval(
child: Image(
image: AssetImage('assets/images/orang1.jpg'), fit: BoxFit.cover),
),
ClipOval(
child: Image(
image: AssetImage('assets/images/orang3.jpeg'), fit: BoxFit.cover),
)
],
accountName: Text('Belajar Flutter'),
accountEmail: Text('[email protected]'),
);
}
Widget _drawerItem({IconData icon, String text, GestureTapCallback onTap}) {
return ListTile(
title: Row(
children: <Widget>[
Icon(icon),
Padding(
padding: EdgeInsets.only(left: 25.0),
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
),
onTap: onTap,
);
}5. Sekarang kita beralih ke main.dart dan import nav-drawer menjadi seperti ini
import 'package:flutter/material.dart';
import 'package:belajar_flutter/nav-drawer.dart';
void main() {
runApp(MaterialApp(
title: "BelajarFlutter.com",
home: BelajarNavigationDrawer(),
));
}
class BelajarNavigationDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Belajar Drawer Nav"),
),
drawer: DrawerWidget(),
endDrawer: DrawerWidget(),
body: Center(
child: Text('Belajar Navigation Drawer di Flutter',
style: TextStyle(fontSize: 20))),
);
}
}
Perhatikan pada baris kedua,
import 'package:belajar_flutter/nav-drawer.dart';tulisan belajar_flutter merupakan nama projek yang kami buat pada tahap pertama, apabila nama projek anda berbeda maka harap sesuaikan dengan nama projek anda masing-masing.
6. Selesai, silahkan coba jalankan atau reload flutter anda
Mengganti Icon Drawer
Secara default, icon drawer seperti ini 
Untuk mengganti default icon, kita bisa menggunakan properti leading atau actions properti pada appBar. Untuk memanggil drawer menggunakan leading kita perlu menambahkan key pada Scaffold. contoh kode nya seperti ini
...
class BelajarNavigationDrawer extends StatelessWidget {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: new IconButton(
icon: new Icon(Icons.account_circle),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
),
...Fungsi openDrawer pada kode () => _scaffoldKey.currentState.openDrawer() ini bertujuan untuk memanggil drawer. Sedangkan apabila ingin menampilkan endDrawer bisa dengan fungsi .openEndDrawer()
Hasil akhir main.dart menjadi seperti ini
import 'package:flutter/material.dart';
import 'package:belajar_flutter/nav-drawer.dart';
void main() {
runApp(MaterialApp(
title: "BelajarFlutter.com",
home: BelajarNavigationDrawer(),
));
}
class BelajarNavigationDrawer extends StatefulWidget {
@override
_BelajarNavigationDrawerState createState() =>
_BelajarNavigationDrawerState();
}
class _BelajarNavigationDrawerState extends State<BelajarNavigationDrawer> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: new IconButton(
icon: new Icon(Icons.account_circle),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
),
title: Text("Belajar Drawer Nav"),
actions: <Widget>[
IconButton(
icon: new Icon(Icons.account_box, color: Colors.white),
onPressed: () => _scaffoldKey.currentState.openEndDrawer()),
],
),
drawer: DrawerWidget(),
endDrawer: DrawerWidget(),
body: Center(
child: Text(
'Belajar Navigation Drawer di Flutter',
style: TextStyle(fontSize: 20),
),
),
);
}
}Penutupan
Tutorial diatas merupakan dasar cara membuat navigation drawer di flutter. Masih banyak yang dapat kita explore seperti membuat kostum drawer header dengan DrawerHeader(), atau routing navigasi, dan masih banyak lagi. Kita akan coba bahas pada kesempatan selanjutnya.
Jika ada pertanyaan silahkan kirimkan pada kolom komentar dibawah, dan share apabila tutorial ini menurut anda bermanfaat. Terimakasih dan selamat mencoba 🙂
Referensi :
https://flutter.dev/docs/cookbook/design/drawer
https://material.io/components/navigation-drawer/
ada kah contoh drawer, yang salah menunya opendialog untuk exit app .. yes or no
Terima kasih
on going ya mas, soalnya masih banyak yang blm di naikin
apakah ada tutorial yang drawernya itu menggeser main page, seperti admin dashboard gitu