Scribd
Unggah
15 tayangan

Modul 7 - Bottom Sheet, Drawer, Navigation

modul 7

Diunggah oleh

Ilham Yudanto 9k
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
15 tayangan

Modul 7 - Bottom Sheet, Drawer, Navigation

modul 7

Diunggah oleh

Ilham Yudanto 9k
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

LAPORAN MODUL PRAKTIKUM

PEMROGRAMAN MOBILE
MODUL 7

DISUSUN OLEH
[ NAMA]
[NPM]

PROGRAM STUDI INFORMATIKA


FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS BHINNEKA PGRI
2023

Program Studi Informatika - UBHI


PROGRAM STUDI INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS BHINNEKA PGRI
Praktikum Matakuliah Pemrograman Mobile
Modul Praktikum Bottom Sheet, Drawer &Navigation
Dosen Pengampu Taufiq Agung Cahyono, M.Kom

Pada modul ini kita akan belajar beberapa widget, diantaranya: Bottom Sheet, Drawer
dan juga Navigation. Adapun class MaterialApp() dan class Scafold() akan dipisah
sebagaimana pada modul-modul sebelumnya.

1. Bottom Sheet Widget.


Bottom Sheet adalah salah satu komponen material widget Flutter. Bottom Sheet
merupakan menu pilihan yang pada umumnya disembunyikan dibagian bawah layar,

yang bisa ditarik keatas untuk menampilkan menu layar tersebut. Untuk menampilkan
widget Bottom Sheet, kita harus memanggil class showModalBottomSheet (). Berikut

contoh criptnya:

Program Studi Informatika - UBHI


2. Drawer Widget

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.

Program Studi Informatika - UBHI


3. Navigator
Navigator adalah sebuah widget pada Flutter yang digunakan untuk mengatur navigasi
antar halaman dalam aplikasi. Dalam Flutter, setiap halaman pada aplikasi dianggap
sebagai sebuah widget. Dalam Navigator, setiap halaman pada aplikasi diwakili oleh
sebuah widget dan setiap transisi navigasi antar halaman dilakukan dengan mengubah
widget yang ditampilkan pada layar.

Konsep dalam penggunaan navigator sendiri mengadopsi dari konsep widget stack.
Dimana layer diilustrasikan memiliki sumbu Z.

Dalam navigator terdapat 2 fungsi utama, yaitu push() dan pop(). Push () berfngsi
ketika kita ingin pindah ke layer selanjutnya. Sedangkan Pop() berfungsi untuk kembali
ke layer sebelumnya.

Program Studi Informatika - UBHI


Dalam modul praktikum ini diilustrasikan memiliki 3 halaman / layer, diantaranya
adalah HomePage(), ProductPage() dan ProfilPage(). Sehingga harus dibuat
terlebih dahulu file filenya sesuai dengan halaman tersebut. File file tersebut akan
disimpan dalam folder lib -> page (boleh menggunakan nama lain). Berikut
contohnya:

A. Halaman main.dart
Halaman main.dart merupakan file utama karena terdapat void main yang
berfungsi untuk menjalankan sebuah program. File main.dart berisi class
stateless beserta materialApp ().

B. Halaman HomePage.dart
Halaman HomePage.dart berisi class satateless yang terdapat scaffold nya.
Dapat diartikan bahwa halaman ini merupakan layer baru. Dalam halaman ini
terdapat tombol yang memiliki fungsi navigator push(). Navigator push()
berfungsi untuk pindah ke halaman selanjutnya. Dalam hal ini halaman
selanjutnya adalah halaman ProductPage().

Program Studi Informatika - UBHI


C. Halaman ProductPage.dart
Pada halaman ini terdapat dua tombol yang masing masing berfungsi untuk
beralih kehalaman berikutnya dan beralih ke halaman sebelumnya. Untuk
beralih ke halaman sebelumnya menggunakan Navigator Pop().

Program Studi Informatika - UBHI


D. Halaman ProfilePage.dart
Halaman ini berisi satu tombol saja yang berfungsi untuk kembali ke halaman
berikutnya. Pada tombol tersebut terdapat fungsi navigator pop().

Program Studi Informatika - UBHI


Tugas Modul 7
1. Modifikasi setiap widget yang ada pada modul diatas dengan
kreativitas kalian. (Boleh melihat referensi di internet).
2. Semakin banyak modifikasi yang dilakukan, maka semakin
bagus nilai yang akan didapat.
3. Berikan penjelasan dari setiap modifikasi yang sudah kalian
buat

Program Studi Informatika - UBHI

Anda mungkin juga menyukai