Pada kali ini kita akan membuat dan mempelajari sebuah widget pada flutter yaitu Drawer. Drawer merupakan menu navigasi yang tampil penuh pada sisi kanan atau kiri sebuah aplikasi. Untuk memunculkan Navigation Drawer bisa dengan cara di mengeser / swipe layar atau dengan menekan icon menu pada appBar. Pada Flutter, cara membuat navigation drawer sangat mudah yaitu hanya menggunakan widget Drawer yang dapat kita tempatkan pada properti drawer atau endDrawer di Scaffold Widget.

Cara membuat sebuah drawer pada flutter:

• Langkah pertama membuat sebuah project baru pada flutter
• Buatlah sebuah class widget drawer

drawer: Drawer(
  child: ListView(
    children: [
      UserAccountsDrawerHeader(
          accountName: Text("Udacoding Batam"),
          accountEmail: Text("[email protected]"),
        currentAccountPicture: CircleAvatar(
          child: Icon(CupertinoIcons.person_alt, size: 40,),
        ),
      ),
      ListTile(
        title: Text("Beranda"),
        leading: Icon(CupertinoIcons.home),
        trailing: Icon(Icons.arrow_right),
      ),
      ListTile(
        leading: Icon(CupertinoIcons.airplane),
        title: Text("Batam"),
      ),
      ListTile(
        leading: Icon(CupertinoIcons.location),
        title: Text("Logout"),
      )
    ],
  ),
),

• Full Source

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            UserAccountsDrawerHeader(
                accountName: Text("Udacoding Batam"),
                accountEmail: Text("[email protected]"),
              currentAccountPicture: CircleAvatar(
                child: Icon(CupertinoIcons.person_alt, size: 40,),
              ),
            ),
            ListTile(
              title: Text("Beranda"),
              leading: Icon(CupertinoIcons.home),
              trailing: Icon(Icons.arrow_right),
            ),
            ListTile(
              leading: Icon(CupertinoIcons.airplane),
              title: Text("Batam"),
            ),
            ListTile(
              leading: Icon(CupertinoIcons.location),
              title: Text("Logout"),
            )
          ],
        ),
      ),
      appBar: AppBar(
        title: Text("Batch 9 Magang Udacoding"),
      ),
    );
  }
}