Memanfaatkan Drawer di Flutter untuk Navigasi Samping yang Efisien

August 1, 2023

Flutter adalah kerangka kerja pengembangan aplikasi seluler yang populer dan kuat, yang menyediakan berbagai widget yang kaya fitur. Salah satu widget yang berguna untuk menyediakan navigasi samping yang efisien adalah Drawer. Dalam artikel ini, kita akan membahas tentang Drawer, serta memberikan contoh penggunaan untuk memahami cara menggunakannya.

Apa itu Drawer?

Drawer adalah widget di Flutter yang digunakan untuk menyajikan menu navigasi yang tersembunyi pada bagian samping aplikasi. Anda dapat memposisikan Drawer di sebelah kiri atau kanan aplikasi, dan pengguna dapat mengaksesnya dengan menggeser layar ke arah yang sesuai atau dengan mengetuk ikon navigasi khusus yang biasanya berupa ikon hamburger.

Drawer sangat cocok untuk menyajikan opsi navigasi tambahan atau tindakan menu lainnya, seperti pengaturan, akun pengguna, atau navigasi antara bagian-bagian penting dalam aplikasi.

Contoh Penggunaan Drawer

Mari kita lihat contoh sederhana penggunaan Drawer dalam aplikasi Flutter.

Pastikan Anda sudah menginstal Flutter dan sudah memiliki proyek Flutter yang sedang berjalan.
Buka file pubspec.yaml dan pastikan pustaka flutter telah ditambahkan.
Berikut adalah contoh codenya :

import ‘package:flutter/material.dart’;
import ‘package:flutter/src/widgets/framework.dart’;
import ‘package:flutter/src/widgets/placeholder.dart’;

class ArtikelPage5 extends StatefulWidget {
const ArtikelPage5({super.key});

@override
State<ArtikelPage5> createState() => _ArtikelPage5State();
}

class _ArtikelPage5State extends State<ArtikelPage5> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Drawer Example’),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
‘App Name’,
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text(‘Home’),
onTap: () {
// Implement your home action here.
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text(‘Settings’),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.info),
title: Text(‘About’),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: Center(
child: Text(‘Main Content’),
),
);
}
}

Berikut adalah tampilanya :

Pada contoh di atas, kami menggunakan Drawer dalam aplikasi. Saat ikon hamburger di bilah aplikasi ditekan, Drawer akan muncul dengan opsi navigasi: “Home”, “Settings”, dan “About”. Setiap opsi memiliki ikon dan teks yang sesuai. Saat salah satu opsi dipilih, Drawer akan ditutup dan tindakan yang sesuai akan dijalankan.

Kesimpulan

Drawer adalah widget yang berguna di Flutter untuk menyediakan navigasi samping yang efisien dalam aplikasi Anda. Dalam artikel ini, kita telah melihat contoh sederhana tentang cara menggunakan Drawer dalam aplikasi Flutter. Anda dapat menyesuaikan opsi dan tampilan lebih lanjut sesuai dengan kebutuhan proyek Anda untuk menciptakan navigasi samping yang sesuai dengan desain aplikasi Anda dan menyediakan pengalaman pengguna yang lebih baik.