Pada praktikum kali ini, kita akan membahas mengenai Navigation dan Routing serta Multiple Screen pada Flutter. Adapun tujuan dari praktikum ini adalah:
- Membuat aplikasi yang dapat berpindah dari halaman satu ke halaman lain
- Membuat aplikasi yang dapat mengirim dan menerima data dari halaman lain
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.
Berdasarkan gambar diatas maka dapat dijelaskan sebagai berikut.
- Halaman awal aplikasi flutter akan berada pada posisi dasar, pada contoh diatas adalah halaman product.
- Ketika akan berpindah ke halaman baru, flutter akan menggunakan perintah push sehingga halaman baru akan berada diatas tumpukan halaman sebelumnya, contohnya Ketika sedang berada pada halaman product kemudian berpindah ke halaman detail product maka secara otomatis halaman detail product akan berada diatas halaman product.
- Ketika pada halaman detail product menekan tombol Kembali maka flutter akan menggunakan perintah pop dan halaman detal flutter akan dilkeluarkan dari tumpukkan dan akan muncul halaman sebelumnya yaitu halaman product.
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.
Generated Routes
Generated Routes adalah sebuah mekanisme mengelola routes dengan mengirimkan paremeter dan handle error.
Berikut adalah Langkah-langkah praktikum pada hari ini:
Kita akan membuat file baru dan membuat class menggunakan stateless widget dengan nama MyNav.
Kodenya seperti berikut:
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'),
),
),
);
}
}Hasilnya, seperti berikut. halaman pertama akan menampilkan halaman berikut:
Kemudian jika kita tekan tombol product detail maka akan pergi ke halaman berikut:
