Laporan Praktikum

1 Oktober 2025 ~ Oleh Surya Andika

Laporan Praktikum Aplikasi Mobile 4

Navigation & Routing : Multiple Screen

1. Tujuan

Tujuan praktikum ini yaitu mahasiswa mampu membuat dan menguasai konsep navigasi dan routing pada bahasa pemrograman flutter, ada pun beberapa tujuan lainnya yaitu:

• Membuat aplikasi yang dapat berpindah dari halam satu ke halaman lain
• Membuat aplikasi yang dapat mengirim dan menerima data dari halaman lain

2. Alat yang Digunakan

• IDE (Visual Studio Code)
• Flutter & Dart

3. Teori

• Navigation dan Routing FLutter

  Navigation atau Navigasi merupakan sebuah proses berpindah dari satu halaman (screen/page) ke halaman lain dalam sebuah aplikasi flutter, misalkan perpindahan dari halaman login aplikasi ke halaman utama aplikasi ketika tombol login ditekan atau proses perpindahan dari halaman produk ke halaman detail produk dan proses kembalinya dari halaman detail produk ke halaman produk. Navigasi pada flutter menggunakan widget Navigator yang mana bekerja menggunakan konsep tumpukan (stack), Gambar berkut ini merupakan konsep dasar navigasi pada flutter.

  Routing atau Rute adalah sebuah sistem yang digunakan untuk mendefinisikan dan mengelola routes dalam aplikasi, setiap route didefinisikan sehingga Ketika akan memanggil halaman cukup dengan memanggil nama route tersebut, hal ini mempermudah dalam mengelola route tanpa harus membuat instance baru setiap kali akan memanggil suatu halaman.

  • Navigator (Anonymous Routes)

  Widget Navigation menampilkan halaman dengan konsep tumpukan menggunakan animasi transisi Ketika berpindah ke halaman, untuk berpindah ke halaman baru diakses melalui BuildContext dengan memanggil method seperti push() atau pop() secara langsung.

  • Named Routes

  Named Routes atau Rute Bernama mengelola route pada widget MateriapApp atau CupertinoApp kemudian memanggilnya berdasarkan nama yang telah diberikan, berikut contoh penggunaan named routes pada Flutter.

4. Langkah-Langkah

1. Multiple Screen
   • Buat file dart baru dengan nama 4.multiple_screen.dart di dalam folder lib
   • lalu masukkan kode program dibawah ini untuk menampilkan tampilan Multiple Screen
   
   • Widged Product Page: Menampilkan halaman produk dengan appbar dan tombol yang mengarahkan pengguna ke halaman produk detail page
   • Widget Product Detail Page: Menampilkan halaman produk dengan appbar dan tombol mengarahkan pengguna kembali ke halaman sebelumnya yaitu product page
   • Berikut hasil dari kode multiple_screen
     • Halaman pertama
     
     • Menekan button "Go to Product Detail"
     
2. Multiple Screen (constructor/named routes)
   • Buat file dart baru dengan nama 4.io.dart di dalam folder lib
   • Jika menggunakan constructor, berikut kode program yang digunakan untuk menampilkan multiple screen
   
   • Jika menggunakan namedRoute, berikut kode program yang digunakan untuk menampilkan multiple screen
   
   • Widged Home Page: Menampilkan halaman utama dengan appbar dan dua tombol yang mengarahkan pengguna ke halaman profile dan product
   • Widget Profile Page: Menampilkan halaman profile dengan appbar dan teks berisi identitas yang sudah dibuat sebelumnya
   • Widget Product Page: Menampilkan halaman produk dengan appbar dan teks berupa nama product dan lainnya yang sudah dibuat
   • Berikut hasil dari kode multiple_screen yang menggunakan constructor ataupun namedRoute
     • Halaman pertama
     
     • Menekan button "Profile"
     
     • Menekan button "Product"
     

Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa dalam Flutter terdapat dua pendekatan utama untuk melakukan navigasi dan mengirim data antar halaman: menggunakan constructor untuk mengirim data secara langsung saat membuat instance widget, atau menggunakan named routes dengan arguments yang lebih fleksibel untuk navigasi yang terstruktur melalui MaterialApp, dimana pemilihan metode tergantung pada kebutuhan aplikasi - constructor cocok untuk data sederhana sedangkan named routes lebih sesuai untuk aplikasi dengan banyak halaman dan navigasi yang kompleks

Tugas

• Buatlah halaman login dan halaman utama, kemudian inputkan username dan password, Ketika diklik login akan berpindah ke halaman utama dengan mengirimkan data username dan password, tampilkan data tersebut pada halaman utama.
• Beberapa widget flutter telah menggunakan Konsep navigation dan routing seperti Tabs, Bottom Navigation Bar dan Drawer. Berikan contoh penerapan salah satu dari ketiga widget tersebut
• Kode untuk halaman Login

• Kode untuk halaman Dashboard


Membuat form login dengan validasi kecil seperti text field tidak boleh kosong dan text field bagian password tidak boleh kurang dari 6 karakter. Kemudian membuat tombol login yang mengarahkan pengguna ke halaman dashboard page

Membuat halaman dashboard dengan menambahkan konsep navigasi dan routing bottom navigation bar

• Halaman Profile : halaman sederhana yang menampilkan icon, teks (username dan password), widget untuk identitas pengguna yang login pada saat itu. Dan juga tombol yang mengarahkan kembali pengguna ke halaman login sebelumnya
• Halaman Home : halaman sederhana yang menampilkan icon dan teks website yang diakses oleh pengguna
• Tampilan pertama, Login

• Tampilan Dashboard

• Tampilan Navigation Bar Home