Flutter - Drawer

Publish : 17 Jan 2020

Futter

Programming Mobile App


Share this post :

fb-icon tw-icon pt-icon wa-icon


Drawer adalah suatu slide untuk menu yang biasa terdapat pada kebanyakan Aplikasi Smartphone. Pada tutorial kali ini saya akan menuliskan cara membuat Drawer pada Flutter, yang hasilnya seperti gambar dibawah ini.

 

Saya sudah membuat sebuah project dan sudah membuat sebuah Appbar. Isi dari file main.dart pada mulanya adalah seperti berikut ini.

 

import 'package:flutter/material.dart';
import 'package:flutterappbar/widgets/mydrawer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
          return MaterialApp(
              title: 'Tutorial Drawer',
              debugShowCheckedModeBanner: false,
              theme: ThemeData(
                    primarySwatch: Colors.blue,
              ),
              home: HalamanHome(),
          );
      }
}

class HalamanHome extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
          return Scaffold(
              appBar: AppBar(
                  title: Text('IDR CORNER DRAWER'),
                  backgroundColor: Colors.red,
                  centerTitle: true,
                ),
       );
    }
}

 

Selanjutnya saya akan membuat sebuah file baru bernama MyDrawer.dart didalam folder baru yaitu widgets, untuk membuat isi dari item-item drawer-nya. Tujuan membuat pada file baru adalah agar Drawer ini dapat digunakan pada semua halaman di aplikasi, Sehingga kita hanya cukup membuatnya satu kali saja untuk satu Aplikasi.

 

Pada Drawer ini saya akan menggunakan gambar sebagai headernya. Jadi saya akan menambahkan folder baru bernama imgs dan menambahkan sebuah gambar.

 

Selanjutnya daftarkan gambar header.jpg pada file pubspec.yaml

 

 

Pada file pubspec.yaml tambahkan gambar header.jpg sebagai asset

 

Pada file MyDrawer.dart saya akan membuat drawer yang berisi Header dan List Menu, seperti berikut


import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
         return Drawer(
              child: ListView(
                  children: <Widget>[
                       Container(
                            height: 130,
                            decoration: BoxDecoration(
                            image: DecorationImage(
                                 image: AssetImage("lib/imgs/header.jpg",),
                                 fit: BoxFit.fill,
                                )
                            ),
                       ),
                       ListTile(
                            leading: Icon(Icons.dashboard),
                            title: Text('Dashboard'),
                       ),
                       ListTile(
                            leading: Icon(Icons.video_library),
                            title: Text('Videos'),
                       ),
                       ListTile(
                            leading: Icon(Icons.playlist_play),
                            title: Text('Playlist'),
                       ),
                       ListTile(
                            leading: Icon(Icons.chat),
                            title: Text('Comment'),
                       ),
                       Divider(),
                       ListTile(
                            leading: Icon(Icons.settings),
                            title: Text('Settings'),
                       ),
                  ],
             ),
          );
      }
}

 

Penjelasan :

Nilai balik dari file MyDrawer.dart ini adalah sebuah Widget Drawer, yang memiliki child sebuah ListView.

Didalam ListView inilah tempat kita menyusun item-item untuk Drawer-nya.

Item pertama, saya membuat header yang menggunakan Widget Container, yang memiliki decoration image sebuah gambar yang tadi sudah didaftarkan.

Item selanjutnya adalah menu yang menggunakan Widget ListTile, untuk menu : Dasboard, videos, playlist, comments dan setting.

Diantara menu Playlist dan Comment saya menggunakan widget Divider untuk membuat garis pembatas.

 

 

Untuk menggunakan drawer ini pada file main.dart import terlebih dahulu file mydrawer.dart. Selanjutnya tambahkan properti pada scaffold yaitu drawer, yang berisi widget MyDrawer.

 

main.dart

import 'package:flutterappbar/widgets/mydrawer.dart';

 

...

return  Scaffold(
   appBar: AppBar(
       title: Text('IDR CORNER DRAWER'),
       backgroundColor: Colors.red,
       centerTitle: true,
   ),
   drawer: MyDrawer(),
);

...

 

Sampai disini kita sudah berhasil membuat Drawer pada Flutter.

 

     

 

 

Lihat juga: Video Flutter Membuat Drawer

 




Share this post :

fb-icon tw-icon pt-icon wa-icon