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 🙂
