Halo Teman Koding, pada kesempatan ini di tutorial flutter series Bahasa Indonesia yang ke-15, kita akan mempelajari mengenai bagaimana cara membuat Drawer Navigation Material Design dengan Flutter. Drawer adalah salah satu menu yang cukup populer digunakan untuk membuat sebuah aplikasi, entah itu aplikasi iOS maupun Android, contoh aplikasi yang menggunakan Drawer antara lain Telegram dan Gmail.

https://www.konsepkoding.com/2020/05/tutorial-flutter-membuat-drawer.html


Di kesempatan Flutter Tutorial Series Bahasa Indonesia ini akan KonsepKoding jelaskan secara detail bagaiaman langkah-langkah dan kodingan untuk membuat Drawer Navigation yang keren dan ciamik pada Flutter. Sangat komptaible untuk platform iOS maupun Android. Happy Coding, Let's Start To Koding.

Memulai Project Dan Ngoding

Pertama kalau kamu belum membuat project Flutter silahkan buat project flutter terlebih dahulu, buka terminal/cmd kamu lalu ketikan perintah untuk membuat project flutter di bawah ini :

flutter create drawer

Setelah berhasil membuat project flutter mu, silahkan ubah kode di bagian lib/main.dart menjadi seperti kode di bawah ini :

Jika sudah menngubak kode di lib/main.dart silhakn jalankan perintah untukk menjalankan flutter di bawah ini:

flutter run
Jika berhasil maka output result program drawer Flutter yang kita buat akan seperti pada gambar di bawah ini :


https://www.konsepkoding.com/2020/05/tutorial-flutter-membuat-drawer.html

https://www.konsepkoding.com/2020/05/tutorial-flutter-membuat-drawer.html

Penjelasan Kode

drawer: Drawer(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.alarm),
              title: Text("Alarm"),
              onTap: () {
                // Change the applications state
                print("Change page");
                Navigator.pop(context);
              },
            ),
             ListTile(
              leading: Icon(Icons.ac_unit),
              title: Text("AC"),
              onTap: () {
                // Change the applications state
                print("Change page");
                Navigator.pop(context);
              },
            ),
             ListTile(
              leading: Icon(Icons.directions_bike),
              title: Text("Bike"),
              onTap: () {
                // Change the applications state
                print("SIlahkan Pindah Halaman");
                Navigator.pop(context);
              },
            ),
             ListTile(
              leading: Icon(Icons.chrome_reader_mode),
              title: Text("Read"),
              onTap: () {
                // Change the applications state
                print("Silahkan Pindah Halaman");
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
Kode di atas berguna untuk membuat Drawer pada flutter dengan Icon material design dalam bentuk ListTitle Widget.


Sekian semoga tutorial Drawer Flutter kali ini dapat bermanfaat dan membantu kamu yang sedang mempelajari Framework Google Flutter. Jika ada pertanyaan silahkan tulis di kolom komentar dan jika tutorial ini bermanfaat silahkan share dan selalu ikuti update-an dari Konsep Koding.


Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter
#13 Tutorial Flutter Membuat Top TabBarView
#14 Tutorial Flutter Membuat Bottom TabBarView