flutter

Membuat Menu Drawer di Flutter

 

Drawer adalah sebuah Menu yang terletak disamping kiri dan  tersembunyi diwakili dengan tanda strip tiga seperti terlihat dibawah ini:

 

Setelah menu ini ditekan maka akan tampil tampilan menu seperti dibawah ini:

 

 

Pembuatan Kode

Buatlah file utama.dart lalu masukkan kode berikut ini:

import ‘package:flutter/material.dart’;
class Dashboard extends StatelessWidget {
  const Dashboard({super.key});
  final String judul = ‘Dashboard’;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: judul,
      home: isiDashboard(judul: judul),
    );
  }
}
class IsiDashboard extends StatelessWidget {
  final String judul;
  const IsiDashboard({Key? key, required this.judul}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(judul),
        foregroundColor: Colors.white,
        backgroundColor: Colors.lightBlue,
      ),
      body: Center(child: Text(“Halaman Utama”)),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text(‘Fahmi’),
            ),
            ListTile(
              title: Text(‘Tambah Data Murid’),
              onTap: () {}),
            ListTile(title: Text(‘Lihat Data Murid’), onTap: () {}),
            ListTile(
              title: Text(‘Close’),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Keterangan:

  • Widget Drawer ini berisi satu widget ListView dan widget ListView ini berisi beberapa widget ListTile
  • Widget ListTile digunakan untuk membuat satu baris kata dalam menu
  • Navigator.pop(context) digunakan untuk menutup Drawer

Perubahan kode main.dart

Bukalah file lib/main.dart lalu rubahlah seperti kode berikut ini:

import ‘package:flutter/material.dart’;
import ‘package:namaPaketmu/dashboard.dart’;
void main() {
  runApp(MaterialApp(home: Dashboard()));
}

 

Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5