Card image cap
[Flutter][23] Membuat Drawer Menu
Tuesday, 14 May 2019

Hello world,

Di aplikasi yang menggunakan Material Desain, ada dua opsi utama untuk navigasi yaitu tab dan drawer. Ketika ada ruang yang tidak cukup untuk mendukung tab, Drawer menjadi opsi yang baik untuk membuat menu/navigasi yang mampu menampung banyak link. Contoh penggunaannya sebagai berikut:

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamanempat(),
));
}

class Halamanempat extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Drawer"),
),
body: Center(
child: Text("Drawer"),
),
);
}
}

Dimulai dengan contoh kode di atas yang masih kosong akan kita isi dengan drawer sebagai berikut:

        drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Item 1'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
trailing: Icon(Icons.chevron_right),
onTap: () {
},
),
ListTile(
title: Text('Item 3'),
onTap: () {
},
),
],
),
),

Dari contoh di atas saya membuat sebuah drawer yang memiliki Drawer Header dan list menunya ada 3 bentuk. Selanjutnya kita juga dapat mengubah bentuk dari DrawerHeader menjadi berisi profile avatar dan username/email. Ubah DrawerHeader menjadi seperti berikut:

UserAccountsDrawerHeader(
accountName: new Text("Riza"),
accountEmail: new Text("riza@gmail.com"),
currentAccountPicture: new CircleAvatar(
backgroundImage: NetworkImage("https://code.byriza.com/lib/img/logo.png"),
),
),

Keseluruhannya akan menjadi seperti berikut:

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamanempat(),
));
}

class Halamanempat extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Drawer"),
),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: new Text("Riza"),
accountEmail: new Text("riza@gmail.com"),
currentAccountPicture: new CircleAvatar(
backgroundImage: NetworkImage("https://code.byriza.com/lib/img/logo.png"),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Item 1'),
onTap: () {
},
),
ListTile(
title: Text('Item 2'),
trailing: Icon(Icons.chevron_right),
onTap: () {
},
),
ListTile(
title: Text('Item 3'),
onTap: () {
},
),
],
),
),
body: Center(
child: Text("Drawer"),
),
);
}
}


Selamat mencoba :)