Cara Mudah Membuat Navigation Drawer Pada Flutter

Memastikan possible untuk membuat side menu berupa panel navigasi yang menampilkan menu navigasi utama pada aplikasi kita.

1. Membuat Drawer

Contoh

susunan directory

❏ lib
    ❏ pages
        ❏ home_page.dart
    ❏ fragments
        ❏ first_fragment.dart
        ❏ second_fragment.dart
        ❏ third_fragment.dart
    ❏ main.dart

lib/main.dart

import 'package:flutter/material.dart';
import 'package:my_app/pages/home_page.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'NavigationDrawer Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: HomePage(),
        );
    }
}

lib/pages/home_page.dart

import 'package:flutter/material.dart';
import 'package:my_app/fragments/first_fragment.dart';
import 'package:my_app/fragments/second_fragment.dart';
import 'package:my_app/fragments/third_fragment.dart';

class DrawerItem {
    String title;
    IconData icon;
    DrawerItem(this.title, this.icon);
}

class HomePage extends StatefulWidget {
    final drawerItems = [
        new DrawerItem("Fragment 1", Icons.rss_feed),
        new DrawerItem("Fragment 2", Icons.local_pizza),
        new DrawerItem("Fragment 3", Icons.info)
    ];
    
    @override
    _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    int _selectedDrawerIndex = 0;
    
    _getDrawerItemWidget(int pos) {
        switch (pos) {
            case 0:
                return new FirstFragment();
            case 1:
                return new SecondFragment();
            case 2:
                return new ThirdFragment();
            default:
                return new Text("Error");
        }
    }
    
    _onSelectItem(int index) {
        setState(() => _selectedDrawerIndex = index);
        Navigator.of(context).pop(); // close the drawer
    }
    
    @override
    Widget build(BuildContext context) {
        var drawerOptions = <Widget>[];
        
        for (var i = 0; i < widget.drawerItems.length; i++) {
            var d = widget.drawerItems[i];
            drawerOptions.add(
                new ListTile(
                    leading: new Icon(d.icon),
                    title: new Text(d.title),
                    selected: i == _selectedDrawerIndex,
                    onTap: () => _onSelectItem(i),
                )
            );
        }
        
        return new Scaffold(
            appBar: new AppBar(
                title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
            ),
            drawer: new Drawer(
                child: new Column(
                    children: <Widget>[
                        new UserAccountsDrawerHeader(
                            accountName: new Text("John Doe"),
                            accountEmail: null
                        ),
                        new Column(children: drawerOptions)
                    ],
                ),
            ),
            body: _getDrawerItemWidget(_selectedDrawerIndex),
        );
    }
}

lib/fragments/first_fragment.dart seterusnya sama hingga fragment ke 3

import 'package:flutter/material.dart';

class FirstFragment extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new Center(
            child: new Text("Hello Fragment 1"),
        );
    }
}

Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.