Laporan Praktikum 4

Tujuan

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

Pendahuluan

Navigation atau Navigasi merupakan proses berpindah dari satu halaman (screen/page) ke halaman lain dalam sebuah aplikasi Flutter.

Contohnya seperti perpindahan dari halaman login ke halaman utama aplikasi atau dari halaman produk ke halaman detail produk.

Flutter menggunakan widget Navigator yang bekerja menggunakan konsep tumpukan (stack).

Penjelasan Konsep Stack

Halaman awal aplikasi berada pada posisi dasar stack.

Ketika berpindah ke halaman baru, Flutter menggunakan method push sehingga halaman baru berada di atas halaman sebelumnya.

Ketika tombol kembali ditekan, Flutter menggunakan method pop untuk menghapus halaman teratas dari stack.

Jenis Routing Pada Flutter

1. Navigator (Anonymous Routes)

Navigator digunakan untuk berpindah halaman menggunakan method push() dan pop().

2. Named Routes

Named Routes digunakan untuk mengelola route berdasarkan nama route yang telah didefinisikan.

3. Generated Routes

Generated Routes digunakan untuk mengelola route dengan parameter dan penanganan error.

Implementasi Navigation Flutter

Dibuat class menggunakan Stateless Widget dengan nama MyNav.

import 'package:flutter/material.dart';

void main() => runApp(const MyNav());

class MyNav extends StatelessWidget {
  const MyNav({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const Product(),
        '/product_detail': (context) =>
            const ProductDetail(),
      },
    );
  }
}

Pada kode tersebut digunakan routes untuk mendefinisikan halaman aplikasi.

Navigator.pushNamed(
  context,
  '/product_detail'
);

Digunakan untuk berpindah ke halaman Product Detail.

Navigator.pop(context);

Digunakan untuk kembali ke halaman sebelumnya.

Hasil Program

Halaman pertama akan menampilkan halaman Product.

Ketika tombol Product Detail ditekan, maka aplikasi akan berpindah ke halaman detail produk.

Kesimpulan

Pada praktikum ini dipelajari konsep dasar Navigation dan Routing pada Flutter.

Flutter menggunakan Navigator dengan konsep stack untuk mengatur perpindahan halaman aplikasi.

Method push digunakan untuk menambahkan halaman baru, sedangkan pop digunakan untuk kembali ke halaman sebelumnya.

Selain itu dipelajari juga penggunaan Named Routes untuk mengelola halaman aplikasi dengan lebih terstruktur.