Tutorial Flutter Cara Membuat Drawer Mudah dan Lengkap

Tutorial Flutter Cara Membuat Drawer Mudah dan Lengkap
Tutorial Flutter Cara Membuat Drawer Mudah dan Lengkap
Codingtive.com - Drawer merupakan komponen pada Material Design yang digunakan sebagai widget navigasi. Pada pembuatan dengan native kita mengenalnya dengan Navigation Drawer, tutorial ini kita akan belajar cara membuat drawer pada Flutter dengan mudah dan lengkap. Untuk memunculkan widget drawer biasanya dengan melakukan swipe pada layar atau melalui icon button yang berada di App Bar.

Ikuti langkah-langkah berikut untuk mulai membuatnya :

1. Buat project Flutter

Buatlah project Flutter dengan menggunkan Android Studio atau bisa menggunakan versi CLI, dan pastikan laptop kalian terkoneksi dengan internet. Beri nama project yang dibuat flutter_nav_drawer.

2. Pengenalan drawer pada Flutter

Sebelum membuat drawer, tentunya kita harus mengenal bagaimana drawer dan apa saja yang didalamnya. Berikut tampilan dan informasi dari drawer yang akan kita buat :
Flutter Drawer Component
Flutter Drawer Component
Untuk bagian daftar menu seperti gambar diatas kita akan menggunakan ListTile, berikut gambaran dari widget ListTile :
Flutter ListTile Component
Flutter ListTile Component
Drawer juga dapat berada di sebalah kanan maupun kiri, untuk perbedaannya lihat gambar berikut :
Flutter Drawer dan End Drawer
Flutter Drawer dan End Drawer

3. Membuat drawer

Buka file main.dart pada folder lib, kemudian hapus semua kodenya dan pertama tambahkan kode untuk import library material desain. Tambahkan kode berikut :
import 'package:flutter/material.dart';
Buat fungsi main untuk menampilkan widget yang akan kita buat, tambahkan kode berikut dibawahnya :
void main() {
  runApp(MaterialApp(
    title: "Navigation Drawer",
    debugShowCheckedModeBanner: false,
    home: _HomePage(),
  ));
}
Selanjutnya kita akan membuat class _HomePage berupa StatefulWidget. Tambahkan kode dibawah fungsi main :
class _HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<_HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation Drawer'),
      ),
      body: Center(
        child: Text('Flutter Navigation Drawer'),
      ),
      drawer: _buildDrawer(),
      endDrawer: _buildDrawer(),
    );
  }

  Widget _buildDrawer() {
    return SizedBox(
      width: MediaQuery.of(context).size.width/1.2,
      child: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
                accountName: Text("Codingtive"),
                accountEmail: Text("codingtive@gmail.com"),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
            ),
            _buildListTile(Icons.apps, "Applications", null),
            _buildListTile(Icons.notifications, "Notifications", null),
            _buildListTile(Icons.subscriptions, "Subscribe", null),
            _buildListTile(Icons.bookmark_border, "Wishlist", null),
            Divider(
              height: 2.0,
            ),
            _buildListTile(Icons.person, "Account", null),
            _buildListTile(Icons.settings, "Settings", null),
            Divider(
              height: 2.0,
            ),
            _buildListTile(null, "About Codingtive", null),
            _buildListTile(null, "Logout", Icons.input),
          ],
        ),
      ),
    );
  }

  Widget _buildListTile(
    IconData iconLeading,
    String title,
    IconData iconTrailing,
  ) {
    return ListTile(
      leading: Icon(iconLeading),
      title: Text(title),
      trailing: Icon(iconTrailing),
      onTap: () {},
    );
  }
}
_buildListTile() merupakan fungsi untuk membuat ListTile yang berisi leading, title, dan iconData

Untuk mengubah ukuran dari drawer kalian dapat mengubahnya pada bagian width didalam widget SizedBox.

4. Finishing 

Sebelum dijalankan, buka file widget_test.dart pada folder test, dan tambahkan komentar pada pemanggilan class MyApp, karena kita tidak menggunakan class tersebut. Kodenya seperti berikut :
//import 'package:flutter_nav_drawer/main.dart';
//await tester.pumpWidget(MyApp());
Sekarang coba jalankan dengan emulator atau hp kalian, hasilnya seperti berikut :
Flutter Drawer ExampleFlutter Navigation Drawer Example

Untuk source code lengkapnya, kalian dapat mempelajarinya di repository saya :
Sekian tutorial flutter cara membuat drawer dengan mudah dan lengkap, setelah kamu berhasil membuat menu navigasi drawer selanjutnya pelajari untuk berpindah halaman. Bagaimana caranya ? Ikuti Tutorial Flutter Cara Routing dengan Navigator. 

Kamu juga dapat belajar membuat menu navigasi yang berada dibawah yaitu Bottom Navigation Bar, ikuti tutorial Tutorial Flutter Cara Membuat Bottom Navigation Bar. Terima kasih

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Cara Membuat Drawer Mudah dan Lengkap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel