Home Mobile Cara Membuat Drawer pada Flutter

Cara Membuat Drawer pada Flutter

0

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.