Cara Membuat Drawer pada Flutter

Pada Flutter, “drawer” mengacu pada sebuah widget yang biasanya digunakan sebagai menu navigasi sisi atau menu tersembunyi yang dapat ditampilkan ketika pengguna melakukan gesture tertentu, seperti menggeser dari tepi layar atau mengetuk ikon khusus.

Drawer biasanya digunakan dalam aplikasi yang memiliki banyak layar atau halaman, di mana pengguna perlu memiliki akses cepat ke berbagai pilihan navigasi atau fungsionalitas. Contoh umum penggunaan drawer adalah dalam aplikasi mobile seperti aplikasi email, di mana Anda dapat menemukan menu navigasi untuk pindah antara folder, mencari email, dan lain sebagainya.

Dalam Flutter, drawer diimplementasikan menggunakan widget Drawer. Widget ini biasanya ditempatkan di dalam Scaffold, dan dapat diakses melalui properti drawer dari Scaffold.

Contoh sederhana dari penggunaan drawer dalam Flutter mungkin terlihat seperti berikut:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contoh Drawer'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Header Drawer'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Page1'),
                onTap: () {
                  // Tindakan ketika item drawer dipilih
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Page2'),
                onTap: () {
                  // Tindakan ketika item drawer dipilih
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Isi dari halaman utama'),
        ),
      ),
    );
  }
}

Pada contoh di atas, terdapat sebuah aplikasi Flutter sederhana yang memiliki Scaffold dengan AppBar dan Drawer. Drawer berisi beberapa item menu (dalam hal ini, “Page1” dan “Page 2”). Saat pengguna memilih salah satu item, Anda dapat menentukan tindakan yang sesuai.

Harap diingat bahwa ini hanya contoh sederhana, dan Anda dapat menyesuaikan drawer sesuai dengan kebutuhan dan desain aplikasi Anda.

Subscribe

Related articles

Rahasia Menghadirkan Solusi Desain Luar Biasa untuk Menyelesaikan Masalah

Dalam proses desain UX, memahami masalah yang dihadapi pengguna...

Membongkar Rahasia yang Dapat Meningkatkan Kualitas Produk Kamu!

Kenapa sih kita harus peduli sama orang-orang dengan kebutuhan...

Trik Buat User Journey Map yang Asyik dalam Desain UX!

Kamu pernah ngalamin kayak lagi cari rute di peta,...

Trik Jitu Membuat Cerita Pengguna (User Stories)

Pernah denger tentang cerita pengguna? Gini, cerita pengguna itu...

Animasi On Scroll dengan AOS

Pernahkah Anda mengunjungi suatu website dan terpesona oleh efek...

LEAVE A REPLY

Please enter your comment!
Please enter your name here