Card image cap
[Flutter][24] Memanggil Drawer ke Seluruh Halaman
Friday, 24 May 2019

Hello world,

Pembahasan untuk memanggil sebuah drawer yang sama ke seluruh halaman sama halnya dengan melakukan include/load/import page di dalam page. Pada dasarnya kita dapat membuat sebuah file .dart dan menanggilnya di dalam file .dart lainnya. Contoh yang kita gunakan di sini adalah drawer yang biasanya di setiap halaman akan memiliki konten drawer yang sama persis. Mari kita ikuti contoh di bawah.

import 'package:flutter/material.dart';
import 'main.dart';

class DrawerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: 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: () {
},
trailing: Icon(Icons.chevron_right),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Item 2'),
onTap: () {
},
trailing: Icon(Icons.chevron_right),
),
ListTile(
title: Text('Item 3'),
onTap: () {
},
trailing: Icon(Icons.chevron_right),
),
ListTile(
title: Text('Item 4'),
onTap: () {
},
trailing: Icon(Icons.chevron_right),
),
],
),
);
}
}

Pada contoh di atas saya membuat sebuah file bernama drawer.dart yang berisi class DrawerApp. Selanjutnya kita tinggal memanggilnya di file dart lainnya. Perhatikan contoh di bawah.

import 'package:flutter/material.dart';
import 'drawer.dart';

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

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

Pada tahap di atas yang pertama kali kita harus lakukan adalah mengimport file drawer.dart ke dalam halaman yang kita inginkan (warna kuning). Kemudian kita dapat memanggil class yang kita buat (DrawerApp) ke dalam drawer (warna hijau). 

Cara ini juga dapat digunakan untuk penggunaan lain seperti memanggil sebuah konten tertentu ke dalam file dart lainnya.


Selamat mencoba :)