MODUL PRAKTIKUM

APLIKASI MOBILE - FLUTTER

Praktikum 4

Navigation & Routing : Multiple Screen

Aliffia Humairah - 2311531004

1.1 Tujuan

1.2 Alat

1.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. Misalnya 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 (tumpukan).

Gambar: Konsep Dasar Navigasi Flutter

Konsep Navigasi 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.

Jenis Routing pada Flutter:

Contoh Navigator Push

Center(
  child: ElevatedButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const ProductDetail()),
      );
    },
    child: const Text('Go to Product Detail'),
  ),
);

Contoh Navigator Pop

Center(
  child: ElevatedButton(
    onPressed: () {
      Navigator.pop(context);
    },
    child: const Text('Back to Product'),
  ),
);

Named Routes

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

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

Generated Routes

        MaterialApp(
          onGenerateRoute: (settings) {
            if (settings.name == '/detail') {
              final args = settings.arguments as Map;
              return MaterialPageRoute(
                builder: (context) => DetailPage(data: args['data']),
              );
            }
            return MaterialPageRoute(builder: (context) => NotFoundPage());
          },
        );

Router / Navigator 2.0

Mekanisme pengelolaan routes ini digunakan jika aplikasi yang membutuhkan route yang komplek, biasanya digunakan Ketika membuat aplikasi web pada flutter.

        child: const Text('Open second screen'),
        onPressed: () => context.go('/second'),

Jenis Method Navigation

// Push
Navigator.push(context, route);

// Pop
Navigator.pop(context);

// Pop dengan data
Navigator.pop(context, 'data yang dikembalikan');

Push Replacement

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => LoginPage()),
);

Push and Remove Until

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
  (route) => false,
);

Mengirim dan Menerima Data

Mengirim Data:

// Dengan constructor
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(id: 123, name: Masnoer),
  ),
);

// Dengan named routes
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 123, 'name': 'Masnoer'},
);

1.4 Langkah-langkah

Multiple Screen

  1. Buat file dart baru.
  2. Buat class menggunakan StatelessWidget dengan nama MyNav.
  3. Inisialisasi route pada MaterialApp.
  4. Buat class Product dan ProductDetail.

Kode Program Lengkap

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

Mengirim dan Menerima Data

Buat class HomePage, MyProfile, dan MyProduct. Pada HomePage kirim data ID & Name ke MyProfile menggunakan constructor. Pada HomePage kirim data ID & Name ke MyProduct menggunakan named routes. 

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const MyProfile(id: 1, name: 'Masnoer'),
      ),
    );
  },
  child: const Text('Profile'),
);
    
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'),
          ],
        ),
      ),
    );
  }
}
    
ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(
      context,
      '/product',
      arguments: {'id': 101, 'name': 'Laptop'},
    );
  },
  child: const Text('Product'),
);
    
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'),
          ],
        ),
      ),
    );
  }
}

1.5 Latihan / Tugas

Akses Tugas disini.

Modul Praktikum Aplikasi Mobile - Flutter | Praktikum 4