Widget Drawer digunakan untuk memberikan akses ke berbagai halaman dan fungsionalitas dalam aplikasi Anda. Widget ini ditampilkan sebagai tiga garis horizontal sejajar di bagian atas scaffold. Gerakan horizontal widget ini mengarahkan pengguna ke rute yang berbeda dalam aplikasi Flutter.
Untuk menggunakan drawer, Anda perlu mengimpor paket “package:flutter/material.dart”. Navigasi Drawer terdiri dari tiga bagian: header, body, dan footer. Konsepnya adalah memiliki navigator dengan beberapa item sebagai anak dari drawer yang akan dinavigasikan ke destinasi yang berbeda ketika di-tap. Semua child dari widget Drawer biasanya berada dalam ListView. Pada awalnya, hanya DrawerHeader yang muncul di antarmuka pengguna dan dapat diperluas secara horizontal saat di-tap.
Sintaks
Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel})Properti dari Widget Drawer
- child: Widget lain di bawah widget ini dalam pohon hirarki.
- hashCode: Kode hash untuk object ini.
- key: Mengontrol cara widget lain digantikan oleh widget ini dalam pohon hirarki.
- runtimeType: Representasi tipe object pada saat runtime.
- elevation: Koordinat z di mana drawer ditempatkan relatif terhadap induknya.
- semanticLabel: Label semantik yang digunakan oleh kerangka aksesibilitas untuk mengumumkan transisi layar ketika drawer dibuka dan ditutup.
Fungsi Penting pada Widget Drawer
- build(BuildContext context) → Fungsi ini menentukan bagian UI yang dibuat oleh widget. Fungsi ini dipanggil ketika widget Drawer ditambahkan ke dalam pohon hirarki pada BuildContext tertentu, dan ketika dependensi widget Drawer berubah.
Mengapa Menggunakan Drawer?
Drawer merupakan sebuah fitur yang mudah diimplementasikan dan sangat berguna untuk menyeimbangkan berbagai fungsionalitas pada aplikasi mobile Anda. Dengan menggunakan Drawer, pengguna dapat dengan mudah mengakses berbagai fitur dan tujuan dalam aplikasi Anda, terutama pada aplikasi yang kompleks dengan banyak layar. Dalam hal ini, pengguna dapat dengan mudah beralih antara layar yang berbeda dan menyelesaikan tugas yang diperlukan.
Langkah untuk membuat Drawer
Berikut adalah langkah-langkah sederhana untuk membuat Drawer:
1. Buatlah proyek Flutter: Buka terminal dan navigasikan ke lokasi di mana Anda ingin membuat proyek. Gunakan perintah “flutter create nama_project” untuk membuat proyek Flutter Anda.
flutter create nama_project2. Buatlah widget Scaffold: Buatlah widget dasar dengan mengembalikan Scaffold Widget pada class MyApp yang bisa berupa stateless atau stateful widget. Scaffold Widget memberikan kerangka kerja untuk menentukan struktur tata letak visual dasar dari aplikasi Flutter.
Scaffold(
drawer:
);3. Tambahkan Drawer di dalam scaffold: Atur properti drawer dari scaffold menjadi Drawer dengan ListView sebagai child-nya, atau Anda juga dapat menambahkan Container dengan ListView sebagai child-nya. Berbagai ListViews yang berisi item yang diinginkan perlu ditampilkan di dalam drawer.
Scaffold(
drawer: Drawer(
//...
),
); 4. Tambahkan fungsi untuk menutup drawer: Navigator digunakan untuk mengimplementasikan fungsionalitas penutupan drawer saat pengguna ingin menutupnya setelah mengetuk beberapa item. Hal ini dapat dilakukan dengan menggunakan State Navigator.
Navigator.of(context).pop();Sebuah App Drawer dibagi menjadi tiga kategori:
- Standar Navigation Drawer: Kategori ini memungkinkan pengguna untuk berinteraksi dengan konten layar dan drawer pada saat yang sama.
- Modal Navigation Drawer: Kategori ini memungkinkan pengguna hanya berinteraksi dengan drawer, karena memblokir interaksi pengguna dengan bagian lain dari layar.
- Bottom Navigation Drawer: Kategori ini mirip dengan Modal Navigation Drawer, namun orientasi drawernya mengarah ke bagian bawah layar.
Contoh:
import 'package:flutter/material.dart';
// Fungsi ini memulai proses build dari aplikasi flutter.
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
final appTitle = 'Flutter Drawer Demo';
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
); // MaterialApp
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.purple,
),
body: const Center(
child: Text(
'Drawer adalah layar samping yang tidak terlihat.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0),
)),
drawer: Drawer(
child: ListView(
padding: const EdgeInsets.all(0),
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.purple,
), //BoxDecoration
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.purple),
accountName: Text(
"Asep Komarudin",
style: TextStyle(fontSize: 18),
),
accountEmail: Text("[email protected]"),
currentAccountPictureSize: Size.square(50),
currentAccountPicture: CircleAvatar(
backgroundColor: Color.fromARGB(255, 165, 255, 137),
child: Text(
"A",
style: TextStyle(fontSize: 30.0, color: Colors.blue),
), //Text
), //circleAvatar
), //UserAccountDrawerHeader
), //DrawerHeader
ListTile(
leading: const Icon(Icons.person),
title: const Text(' My Profile '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.book),
title: const Text(' My Course '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.workspace_premium),
title: const Text(' Go Premium '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.video_label),
title: const Text(' Saved Videos '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.edit),
title: const Text(' Edit Profile '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.logout),
title: const Text('LogOut'),
onTap: () {
Navigator.pop(context);
},
),
],
),
), //Drawer
);
}
}Output:
Tutorial sebelumnya : Flutter MaterialApp
Tutorial setelahnya : Flutter AppBar
Semua Tutorial Flutter : Tutorial Flutter