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
- 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, danMyProduct. - 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:
