Laporan Praktikum

01 Oktober 2025 ~ Oleh Kevin Andhika

Navigation & Routing : Multiple Screen

1. Tujuan

Tujuan praktikum ini yaitu pengguna mampu membuat menguasai konsep navigasi dan routing pada pemograman flutter :

  • Membuat aplikasi yang dapat berpindah dari halaman 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

A. Multiple Screen

  • Buat file dart baru dengan nama multipleScreen.dart di dalam folder lib
  • Berikut kode untuk menampilkan tampilan multi screen
    • vsc
    • Widget Product Page: menampilkan halaman produk dengan app bar dan tombol yang mengarahkan pengguna ke halaman produk detail page
    • Widget Produk Detail Page: menampilkan halaman produk dengan app bar dan tombol yang mengarahkan pengguna kembali ke halaman sebelumnya yaitu produk page
  • Berikut hasil run dari kode multiple screen
    • Ketika pertama kali dijalankan
      • vsc
    • Ketika tombol produc detail ditekan
      • vsc

    B. Multiple Screen (constructor / named routes)

    • Buat file dart baru dengan nama constructor.dart dan namedRoute.dartdi dalam folder lib
    • Dengan menggunakan constructor : Berikut kode untuk menampilkan tampilan multi screen dengan constructor
      • vsc
    • Dengan menggunakan named route : Berikut kode untuk menampilkan tampilan multi screen dengan named route
      • vsc
      • Widget Home Page: menampilkan halaman utama dengan app bar dan dua buah tombol yang mengarahkan pengguna ke halaman profile page dan produk page
      • Widget Profile Page: menampilkan halaman profil dengan app bar dan teks berupa identitas pengguna yang sudah di buat sebelumnya
      • Widget Produk Page: menampilkan halaman produk dengan app bar dan teks berupa nama produk yang sudah di buat sebelumnya
    • Berikut hasil run dari kode multiple screen dengan constructor ataupun named route
      • Ketika pertama kali dijalankan
        • vsc
      • Ketika tombol profile ditekan
        • vsc
      • ketika tombol product ditekan
        • vsc

    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.


    Latihan

    • 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

      • > Berikut kode halaman login page

      latihan

      > Berikut kode halaman dashboard page + Widget flutter

      latihan

      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

      Berikut tampilan dari kode sebelumnya

      • Ketika pertama kali dijalankan, halaman login akan terbuka
        • latihan
      • Ketika pengguna sudah login halaman profile akan terbuka
        • latihan
      • Ketika bottom navigation bar home ditekan
        • latihan