Belajar Flutter - Membuat Navigation Drawer dengan Flutter
Jurnalcode.com

Belajar Flutter - Membuat Navigation Drawer dengan Flutter


Jurnalcode : Haloo Lanjut lagi tutorial kita tentang flutter . Nah Kali ini saya akan membahas bagaimana Membuat Sebuah Navigation Drawer dengan Flutter di halaman Tertentu .  Banyak Aplikasi yang kita jumpai di playstore Menggunakan Navigation Drawer, bahkan aplikasi skala besar seperti bukalapak, tokopedia dan lainya juga menggunakan drawer . apa itu drawer ?  Drawer Merupakan component Material desain yang digunakan untuk widget navigasi .

Baiklah langsung saja kita ke coding nya ya .. seperti biasa silahkan buka main.dart dan isikan code berikut :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Jurnalcode';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('Halaman Utama!')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('JURNALCODE.COM'),
              decoration: BoxDecoration(
                color: Colors.green,
              ),
            ),
            ListTile(
              title: Text('Dashboard'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Tentang Kami'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Tutorial'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Produk'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Kontak Kami'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

Jika Sudah Silahkan Jalankan Aplikasi kita jika berhasil maka hasilnya akan seperti ini :

.

Ayo Komentar