Navigating Screen Dengan Drawer

Drawer adalah widget menu yang biasanya dapat diakses melalui icon di sebelah kiri atas aplikasi, atau sering juga hamburger menu.

Kita tambahkan drawer widget yang kita buat pada file terpisah, pada tutorial digunakan nama file main_drawer.dart dan akan dipanggil dari file tab resep_tab_scr.dart.

//main_drawer.dart

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

class MainDrawer extends StatelessWidget {
  Widget buildMenuList(String title, IconData icon, Function funcHandler) {
    return ListTile(
      leading: Icon(icon),
      title: Text(
        title,
        style: TextStyle(
            fontFamily: 'RobotoCondesed',
            fontSize: 22,
            fontWeight: FontWeight.bold),
      ),
      onTap: funcHandler,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Container(
            height: 120,
            width: double.infinity,
            color: Theme.of(context).accentColor,
            padding: EdgeInsets.all(10),
            alignment: Alignment.centerLeft,
            child: Text(
              'Buku Resep',
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 24,
              ),
            ),
          ),
          SizedBox(height: 20),
          buildMenuList(
            'Resep',
            Icons.restaurant_menu,
            () {
              Navigator.of(context).pushNamed('/home');
            },
          ),
          buildMenuList(
            'Setting',
            Icons.settings,
            () {
              Navigator.of(context).pushNamed(SettingScr.routeNm);
            },
          ),
        ],
      ),
    );
  }
}

Pada code diatas digunakan pushNamed. Pada pushNamed, history previous page disimpan agar aplikasi bisa melakukan navigasi back. Penggunaan history yang disimpan berbanding lurus dengan penggunaan memory.

Dapat pushReplacementNamed digunakan agar page lama dihapus saat push page baru. Penggunaan metoda ini baik karena dapat mengurangi penggunaan memori karena page lama dibuang.

Pada resep_tab_scr.dart, pada widget Scaffold kita tambahkan property drawer: yang memanggil file main_drawer.dart.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(_pages[_activePage]['title']),
    ),
    drawer: MainDrawer(),
...
...
...

//resep_tab_scr.dart

import 'package:flutter/material.dart';

import './main_drawer.dart';
import './categories_scr.dart';
import './favorite_scr.dart';

class ResepTabScr extends StatefulWidget {
  @override
  _ResepTabScrState createState() => _ResepTabScrState();
}

class _ResepTabScrState extends State<ResepTabScr> {
  final List<Map<String, Object>> _pages = [
    {'page': CategoriesScr(), 'title': 'Category'},
    {'page': FavoriteScr(), 'title': 'Favorite'}
  ];
  int _activePage = 0;

  void _pageonTap(int idx) {
    setState(() {
      _activePage = idx;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_pages[_activePage]['title']),
      ),
      drawer: MainDrawer(),
      body: _pages[_activePage]['page'],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _pageonTap,
        backgroundColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.white38,
        selectedItemColor: Colors.white,
        currentIndex: _activePage,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('Category'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favorite'),
          ),
        ],
      ),
    );
  }
}

Pada main.dart ada penambahan route name untuk menampilkan setting_scr.dart

import 'package:flutter/material.dart';

import './widgets/categories_scr.dart';
import './widgets/resepbycat_scr.dart';
import './widgets/resepdetail_scr.dart';
import './widgets/resep_tab_scr.dart';
import './widgets/setting_scr.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Buku Resep',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        accentColor: Colors.orangeAccent,
        canvasColor: Color.fromRGBO(255, 254, 229, 1),
        fontFamily: 'Raleway',
        textTheme: ThemeData.light().textTheme.copyWith(
              bodyText1: TextStyle(
                color: Color.fromRGBO(20, 51, 51, 1),
              ),
              headline1: TextStyle(
                fontSize: 18,
                fontFamily: 'RobotoCondensed',
                fontWeight: FontWeight.bold,
              ),
            ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      //home: CategoriesScr(),
      initialRoute: '/home',
      routes: {
        '/home': (ctx) => ResepTabScr(),
        ResepByCat.routeNm: (ctx) => ResepByCat(),
        ResepDetail.routeNm: (ctx) => ResepDetail(),
        SettingScr.routeNm: (ctx) => SettingScr(),
      },
      onUnknownRoute: (setting) {
        return MaterialPageRoute(builder: (ctx) => ResepTabScr());
      },
    );
  }
}

Untuk file setting_scr.dart kita hanya tampilkan content text saja. Karena tujuan dari tutorial ini adalah navigasi.

import 'package:flutter/material.dart';

import './main_drawer.dart';

class SettingScr extends StatelessWidget {
  static const routeNm = '/settings';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: MainDrawer(),
      body: Center(
        child: Text('Settings goes here'),
      ),
    );
  }
}