Aplikasi sangat umum digunakan di dunia teknologi saat ini, dan jumlah aplikasi yang tersedia di toko aplikasi seperti play store dan app store terus bertambah setiap harinya. Untuk bersaing, pengembang aplikasi menambahkan fitur-fitur baru ke dalam aplikasi mereka. Untuk memudahkan navigasi bagi pengguna, konten aplikasi dibagi menjadi berbagai halaman.
Dalam Flutter, halaman atau layar disebut sebagai route. Untuk berpindah dari satu route ke route lain, kita menggunakan widget yang disebut sebagai Navigator. Navigator menjaga semua route dalam bentuk tumpukan, dan memiliki banyak fungsi seperti push dan pop yang bekerja pada tumpukan route. Namun, untuk aplikasi dengan banyak halaman, kita akan menggunakan fungsi unik yang disebut pushNamed.
Fungsi Navigator.pushNamed digunakan untuk memanggil rute. Sekarang, mari kita lanjutkan dengan membuat aplikasi multi halaman.
Aplikasi Multi Halaman
Aplikasi multi halaman di Flutter memungkinkan developer untuk membuat aplikasi dengan beberapa halaman yang berbeda, sehingga pengguna dapat berpindah antara satu halaman dengan halaman lainnya dengan mudah. Halaman dalam Flutter dapat dibuat dengan menggunakan widget yang berbeda-beda, seperti container, image, button, dan sebagainya. Selanjutnya kita akan memulai membuat aplikasi multi halaman dengan mengikuti beberapa langkah berikut:
- Membuat route
- Menentukan route
- Menavigasikan ke halaman
- Kembali ke halaman sebelumnya
Membuat Route
Route biasanya dibuat dalam bentuk class. Setiap route memiliki class yang unik dengan konten dan antarmuka pengguna (UI) yang unik di dalamnya. Di sini, kita akan membuat tiga route yaitu, HomeRoute, SecondRoute dan ThirdRoute. Setiap route akan memiliki App bar yang berisi judul yang unik dan tombol untuk menavigasi antara route. Route dapat dibuat sebagai berikut:
class HomeRoute extends StatelessWidget {
const HomeRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
backgroundColor: Colors.blue,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: const Text('Klik Disini!'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
), // ElevatedButton
ElevatedButton(
child: const Text('Tap Disini!'),
onPressed: () {
Navigator.pushNamed(context, '/third');
},
),
],
),
),
);
}
}
Menentukan Route
Sebelum menavigasi antara route, sangat penting untuk mendefinisikan di dalam widget MaterialApp. Hal ini membantu kita mengakses dan memanggilnya dengan mudah. Router dapat mendefinisikan sebagai berikut:
void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const HomeRoute(),
'/second': (context) => const SecondRoute(),
'/third': (context) => const ThirdRoute(),
},
));
}
Dari kode tersebut, dapat dipahami bahwa setiap route telah diberi nama secara unik. Ketika widget navigator menemukan salah satu dari nama-nama ini dalam class route, maka ia akan menavigasi ke route yang sesuai. initialRoute dalam kode ini menentukan route awal dari aplikasi dan dilambangkan dengan simbol ‘/’. Menetapkan halaman beranda pada widget ini merupakan hal yang wajib dilakukan.
Menavigasi ke Halaman
Fungsi Navigator.pushNamed digunakan dalam teknik ini. Fungsi ini memanggil nama dari route tertentu dalam class route. Dengan demikian, proses navigasi dapat diinisialisasi. Navigasi dapat dilakukan seperti berikut:
onPressed: () {
Navigator.pushNamed(context, '/second');
},
Kembali ke Halaman Sebelumnya
Namun, jika ingin mengunjungi route terakhir yang dikunjungi, fungsi Navigator.pop dapat digunakan. Ini membantu kita untuk kembali navigasi ke route terakhir. Fungsi pop digunakan sebagai berikut:
onPressed: () {
Navigator.pop(context);
},
Jadi, mari kita lihat bagaimana semua kode di atas digabungkan untuk membuat Aplikasi multi halaman.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const HomeRoute(),
'/second': (context) => const SecondRoute(),
'/third': (context) => const ThirdRoute(),
},
));
}
class HomeRoute extends StatelessWidget {
const HomeRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Nextgen Tutorial'),
backgroundColor: Colors.blue,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: const Text('Klik Disini!'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
), // ElevatedButton
ElevatedButton(
child: const Text('Tap Disini!'),
onPressed: () {
Navigator.pushNamed(context, '/third');
},
),
],
),
),
);
}
}
class SecondRoute extends StatelessWidget {
const SecondRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Halaman Klik Disini"),
backgroundColor: Colors.black,
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Kembali!'),
),
),
);
}
}
class ThirdRoute extends StatelessWidget {
const ThirdRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Halaman Tap Disini"),
backgroundColor: Colors.grey,
),
);
}
}
Output:
Tutorial sebelumnya : Argumen Dalam Named Route Di Flutter
Tutorial setelahnya : Update Data Di Internet
Semua Tutorial Flutter : Tutorial Flutter