Navigation Drawer in Flutter

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Navigation Drawer in Flutter. Navigation Drawer adalah sebuah widget pada flutter yang digunakan untuk menampilkan menu yang tersembunyi pada sisi kanan atau kiri sebuah aplikasi. Pada flutter kita bisa menggunakan navigation drawer dengan widget drawer atau widget endDrawer.

Step 1. Buat Drawer Widget

Buat class dengan nama drawer_widget.dart lalu tambahkan code sebagai berikut

import ‘package:flutter/material.dart’;

class DrawerWidget extends StatelessWidget {
  const DrawerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          _drawerHeader(),
          _drawerItem(
              text: ‘Home’,
              onTap: (){}),
          Divider(thickness: 1),
          _drawerItem(
              text: ‘Kontak’,
              onTap: () {}),
          Divider(thickness: 1),
          _drawerItem(
              text: ‘Lokasi’,
              onTap: () {}),
          Divider(thickness: 1),
          _drawerItem(
              text: ‘Tentang Kami’,
              onTap: () {}),
        ],
      ),
    );
  }

Step 2. Tambahkan Drawer Header

Tambahkan function _drawerheader() seperti berikut

Widget _drawerHeader() {
  return UserAccountsDrawerHeader(
    decoration: BoxDecoration(
      color: Colors.blue,
    ),
    currentAccountPicture: ClipOval(
      child: Image(image: AssetImage(‘images/user.png’), fit: BoxFit.cover),
    ),
    accountName: Text(
      ‘Novita Aulia’,
      style: TextStyle(
        fontWeight: FontWeight.w500,
        fontFamily: “Poppins”,
        fontSize: 16,
      ),
    ),
    accountEmail: Text(
      ‘Padang, Indonesia’,
      style: TextStyle(
        fontWeight: FontWeight.w500,
        fontFamily: “Poppins”,
        fontSize: 12,
      ),
    ),
  );
}

Step 3. Tambahkan Drawer Item

Tambahkan function _draweritem() seperti berikut

Widget _drawerItem(
      {required String text, required GestureTapCallback onTap}) {
    return Container(
        width: 50,
        height: 46,
        child: ListTile(
          title: Row(
            children: <Widget>[
              Text(
                text,
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontFamily: “Poppins”,
                  fontSize: 14,
                ),
              ),
            ],
          ),
          onTap: onTap,
        ));
  }
}

Step 4. Import Drawer Widget

Lakukan import drawer_widget pada main.dart seperti berikut

  • Drawer Navigation

import ‘package:flutter/material.dart’;
import ‘package:navigation_drawer/drawer_widget.dart’;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ‘Flutter Demo’,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.blue,
        title: Text(
          “Navigation Bar”,
          style: TextStyle(color: Colors.white),
        ),
        leading: Container(
          child: IconButton(
            onPressed: () {
              _scaffoldKey.currentState!.openDrawer();
            },
            icon: Icon(Icons.menu),
          ),
        ),
      ),
      drawer: DrawerWidget(),
    );
  }
}
  • endDrawer Navigation

import ‘package:flutter/material.dart’;
import ‘package:navigation_drawer/drawer_widget.dart’;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ‘Flutter Demo’,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.blue,
        title: Text(“Navigation Bar”, style: TextStyle(color: Colors.white),),
        actions: [
          IconButton(
            onPressed: (){
              _scaffoldKey.currentState!.openEndDrawer();
            },
            icon: Icon(Icons.menu),
          )
        ],
      ),
      endDrawer: DrawerWidget(),
    );
  }
}

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba ­čÖé

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here