LAPORAN PRAKTIKUM ALIKASI MOBILE 4

Navigation & Routing : Multiple Screen

Tujuan

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

Alat

Computer / laptop yang telah terinstall lingkungan Flutter development

Teori

Navigation dan Routing Flutter : Navigation merupakan proses berpindah dari satu halaman (screen/page) ke halaman lain dalam aplikasi Flutter, misalnya perpindahan dari halaman login ke halaman utama, atau dari halaman produk ke halaman detail produk. Navigasi pada Flutter menggunakan widget Navigator yang bekerja dengan konsep stack.

Routing : merupakan sistem untuk mendefinisikan dan mengelola jalur halaman (routes) dalam aplikasi Flutter agar dapat memanggil halaman menggunakan nama route tanpa membuat instance baru setiap kali.

Jenis – jenis Routing pada Flutter :

• Navigator (Anonymous Routes)
• Named Routes
• Generated Routes
• Router / Navigator 2.0

Langkah – Langkah Kerja

1. Multiple Screen

• Buat file dart baru.
• Buat class menggunakan StatelessWidget dengan nama MyNav.
• Inisialisasi route pada MaterialApp.

Contoh Kode Program Lengkap Navigation & Routing:

 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(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Product')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/product_detail');
          },
          child: const Text('Go to Product Detail'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Product Detail')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Back to Product'),
        ),
      ),
    );
  }
}

Output Navigation & Routing:

2. Mengirim dan Menerima Data antar Halaman

• Buat file dart baru dan inisialisasi route pada MaterialApp.
• Buat class baru: HomePage, MyProfile, dan MyProduct.
• Pada HomePage, kirim data ke halaman lain melalui constructor dan named route.

Implementasi pengiriman data menggunakan constructor dan named routes dengan kode berikut:

   import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        '/product': (context) => const MyProduct(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Page')),
      body: Center(
        child: Row(
          children: [
            // Mengirim data dengan constructor
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(
                    builder: (context) => const MyProfile(id: 001, name: 'Devia Puji Astuti'),
                  ),
                );
              }, 
              child: const Text('Profile'),
            ), 
            // Mengirim data dengan named routes
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context, 
                  '/product',
                  arguments: {'id': 1, 'name': 'sepatu'},
                );
              }, 
              child: const Text('Product'),
            ),
          ],
        ),
      ),
    );
  }
}

class MyProfile extends StatelessWidget {
  final int id;
  final String name;
  const MyProfile({super.key, required this.id, required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('ID: $id'),
            Text('Name: $name'),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map?;
    final int id = args?['id'] ?? 0;
    final String name = args?['name'] ?? 'Unknown';

    return Scaffold(
      appBar: AppBar(title: const Text('Product')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Product ID: $id'),
            Text('Product Name: $name'),
          ],
        ),
      ),
    );
  }
}

dengan outputnya: