Last Updated on May 4, 2022 by
Pada Flutter telah tersedia mekanisme navigasi dan routing yang idiomatis, di mana hal ini mirip dengan metode build seperti yang digunakan pada widget. Pada artikel ini, kami akan mengajak Anda untuk memahami tentang Navigation and Routing Flutter. Jika Anda ingin tahu, simak terus artikel ini sampai akhir.
Table of Contents
Apa Itu Navigation and Routing Flutter?
Navigation and Routing adalah beberapa konsep inti dari semua aplikasi seluler, yang memungkinkan pengguna berpindah di antara halaman yang berbeda. Kita tahu bahwa setiap aplikasi seluler berisi beberapa layar untuk menampilkan berbagai jenis informasi.
Misalnya, sebuah aplikasi dapat memiliki layar yang berisi berbagai produk. Ketika pengguna mengklik produk itu, segera akan muncul informasi rinci tentang produk itu. Di Flutter, layar dan halaman dikenal sebagai rute, dan rute ini hanyalah sebuah widget. Di Android, rute mirip dengan Activity, sedangkan di iOS setara dengan ViewController.
Di aplikasi seluler apa pun, menavigasi ke halaman yang berbeda menentukan alur kerja aplikasi, dan cara menangani navigasi dikenal sebagai routing. Flutter menyediakan kelas routing dasar MaterialPageRoute dan dua metode Navigator.push() dan Navigator.pop() yang menunjukkan cara menavigasi di antara dua rute. Langkah-langkah berikut diperlukan untuk memulai Navigation and Routing Flutter untuk aplikasi Anda.
- Langkah 1: Pertama, Anda perlu membuat dua rute.
- Langkah 2: Kemudian, navigasikan ke satu rute dari rute lain dengan menggunakan metode Navigator.push().
- Langkah 3: Terakhir, navigasikan ke rute pertama dengan menggunakan metode Navigator.pop().
Menciptakan Dua Rute
Pada navigation dan routes pada Flutter ini kita akan membuat dua rute untuk navigasi. Di kedua rute, kami hanya membuat satu tombol. Ketika kita menekan tombol di halaman beranda, itu akan menavigasi ke halaman profile.
Sekali lagi, ketika kita menekan tombol di halaman profile, itu akan kembali ke halaman beranda. Cuplikan kode di bawah ini membuat dua rute di aplikasi Flutter.
1. class BerandaRoute extends StatelessWidget {
2. @override
3. Widget build(BuildContext context) {
4. return Scaffold(
5. appBar: AppBar(
6. title: Text('Beranda Route'),
7. ),
8. body: Center(
9. child: RaisedButton(
10. child: Text('Profile Route'),
11. onPressed: () {
12. // Akan menuju profile route ketika ditekan.
13. },
14. ),
15. ),
16. );
17. }
18. }
19.
20. class ProfileRoute extends StatelessWidget {
21. @override
22. Widget build(BuildContext context) {
23. return Scaffold(
24. appBar: AppBar(
25. title: Text("Profile Route"),
26. ),
27. body: Center(
28. child: RaisedButton(
29. onPressed: () {
30. // Akan kembali menuju beranda route ketika ditekan.
31. },
32. child: Text('Beranda Route'),
33. ),
34. ),
35. );
36. }
37. }
Menavigasikkan ke rute kedua menggunakan metode Navigator.push()
Selanjutnya pada tutorial navigation and routing Flutter ini, Anda melakukan navigasi ke rute profile menggunakan metode Navigator.push(). Metode Navigator.push() digunakan untuk menavigasi/beralih ke rute/halaman/layar baru.
Di sini, metode push() menambahkan halaman/rute pada tumpukan dan kemudian mengelolanya dengan menggunakan Navigator. Sekali lagi kami menggunakan kelas MaterialPageRoute yang memungkinkan transisi antara rute menggunakan animasi khusus platform. Kode di bawah ini menjelaskan penggunaan metode Navigator.push().
1. // Diletakan pada BerandaRoute
2. onPressed: () {
3. Navigator.push(
4. context,
5. MaterialPageRoute(builder: (context) => ProfileRoute()),
6. );
7. }
Kembali ke rute pertama menggunakan metode Navigator.pop()
Sekarang, kita perlu menggunakan metode Navigator.pop() untuk menutup rute profile dan kembali ke rute pertama. Metode pop() memungkinkan kita untuk menghapus rute saat ini dari tumpukan, yang dikelola oleh Navigator.
Untuk menerapkan kembali ke rute asli, kita perlu memperbarui metode callback onPressed() di widget SecondRoute seperti cuplikan kode di bawah ini:
1. // Diletakan pada ProfileRoute
2. onPressed: () {
3. Navigator.pop(context);
4. }
Sekarang, mari kita lihat kode lengkap untuk mengimplementasikan navigasi antara dua rute. Pertama, buat proyek Flutter dan masukkan kode berikut ke dalam file main.dart.
1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(MaterialApp(
5. title: 'Flutter Navigation',
6. theme: ThemeData(
7. primarySwatch: Colors.black,
8. ),
9. home: BerandaRoute(),
10. ));
11. }
12.
13. class BerandaRoute extends StatelessWidget {
14. @override
15. Widget build(BuildContext context) {
16. return Scaffold(
17. appBar: AppBar(
18. title: Text('Beranda Route'),
19. ),
20. body: Center(
21. child: RaisedButton(
22. child: Text('Profile Route'),
23. color: Colors.blueGrey,
24. onPressed: () {
25. Navigator.push(
26. context,
27. MaterialPageRoute(builder: (context) => ProfileRoute()),
28. );
29. },
30. ),
31. ),
32. );
33. }
34. }
35.
36. class ProfileRoute extends StatelessWidget {
37. @override
38. Widget build(BuildContext context) {
39. return Scaffold(
40. appBar: AppBar(
41. title: Text("Profile Route"),
42. ),
43. body: Center(
44. child: RaisedButton(
45. color: Colors.blueGrey,
46. onPressed: () {
47. Navigator.pop(context);
48. },
49. child: Text('Beranda Route'),
50. ),
51. ),
52. );
53. }
54. }
Navigasi dengan Rute Bernama
Pada Flutter, Anda dapat menavigasi ke layar baru dengan membuat rute baru dan mengelolanya dengan menggunakan Navigator. Navigator mempertahankan riwayat rute berbasis tumpukan (stack).
Jika ada kebutuhan untuk menavigasi ke layar yang sama di banyak bagian aplikasi, pendekatan ini tidak bermanfaat karena menghasilkan duplikasi kode. Solusi untuk masalah ini dapat dihilangkan dengan mendefinisikan rute bernama dan dapat menggunakan rute bernama untuk navigasi.
Kita dapat bekerja dengan rute bernama dengan menggunakan fungsi Navigator.pushNamed(). Fungsi ini membutuhkan dua argumen yang diperlukan (konteks dan string build) dan satu argumen opsional.
Selain itu, kita tahu tentang MaterialPageRoute, yang bertanggung jawab untuk transisi halaman. Jika kita tidak menggunakan ini, maka sulit untuk mengubah halaman. Langkah-langkah berikut diperlukan, yang menunjukkan cara menggunakan rute bernama.
1. Buat dua layar
Anda perlu membuat dua layar ketika akan bekerja dengan navigation and routing Flutter. Kode berikut membuat dua layar di aplikasi yang sedang Anda buat.
1. class BerandaScreen extends StatelessWidget {
2. @override
3. Widget build(BuildContext context) {
4. return Scaffold(
5. appBar: AppBar(
6. title: Text('Beranda Screen'),
7. ),
8. body: Center(
9. child: RaisedButton(
10. child: Text('Search Screen'),
11. color: Colors.blueGrey,
12. onPressed: () {
13. },
14. ),
15. ),
16. );
17. }
18. }
19.
20. class SearchScreen extends StatelessWidget {
21. @override
22. Widget build(BuildContext context) {
23. return Scaffold(
24. appBar: AppBar(
25. title: Text("Search Screen"),
26. ),
27. body: Center(
28. child: RaisedButton(
29. color: Colors.blueGrey,
30. onPressed: () {
31. },
32. child: Text('Beranda Screen'),
33. ),
34. ),
35. );
36. }
37. }
2. Menentukan rute
Pada langkah ini, kita harus menentukan rute. Konstruktor MaterialApp bertanggung jawab untuk mendefinisikan rute awal dan rute lainnya sendiri.
Di sini rute awal memberitahu awal halaman dan properti rute mendefinisikan rute dan widget bernama yang tersedia. Kode berikut menjelaskannya dengan lebih jelas.
1. MaterialApp(
2. title: 'Named Route Navigation',
3. theme: ThemeData(
4. primarySwatch: Colors.black,
5. ),
6. initialRoute: '/',
7. routes: {
8. '/': (context) => BerandaScreen(),
9. '/search': (context) => SearchScreen(),
10. },
11. ));
3. Navigasikan ke layar kedua menggunakan fungsi Navigator.pushNamed().
Pada langkah ini, kita perlu memanggil metode Navigator.pushNamed() untuk navigasi. Untuk ini, kita perlu memperbarui callback onPressed() dalam metode build HomeScreen seperti cuplikan kode di bawah ini.
1. onPressed: () {
2. Navigator.pushNamed(context, '/search');
3. }
4. Gunakan fungsi Navigator.pop() untuk kembali ke layar pertama.
Ini adalah langkah terakhir dalam navigation dan routes pada Flutter, di mana kita akan menggunakan metode Navigator.pop() untuk kembali ke layar pertama.
1. onPressed: () {
2. Navigator.pop(context);
3. },
Berikut ini adalah kode lengkap dari penjelasan di atas dalam proyek Flutter dan jalankan di emulator untuk mendapatkan output.
1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp( MaterialApp(
5. title: 'Named Route Navigation',
6. theme: ThemeData(
7. primarySwatch: Colors.black,
8. ),
9. initialRoute: '/',
10. routes: {
11. '/': (context) => BerandaScreen(),
12. '/search': (context) => SearchScreen(),
13. },
14. ));
15. }
16.
17. class BerandaScreen extends StatelessWidget {
18. @override
19. Widget build(BuildContext context) {
20. return Scaffold(
21. appBar: AppBar(
22. title: Text('Beranda Screen'),
23. ),
24. body: Center(
25. child: RaisedButton(
26. child: Text('Search Screen'),
27. color: Colors.blueGrey,
28. onPressed: () {
29. Navigator.pushNamed(context, '/search');
30. },
31. ),
32. ),
33. );
34. }
35. }
36.
37. class SearchScreen extends StatelessWidget {
38. @override
39. Widget build(BuildContext context) {
40. return Scaffold(
41. appBar: AppBar(
42. title: Text("Search Screen"),
43. ),
44. body: Center(
45. child: RaisedButton(
46. color: Colors.blueGrey,
47. onPressed: () {
48. Navigator.pop(context);
49. },
50. child: Text('Beranda Screen'),
51. ),
52. ),
53. );
54. }
55. }
Itulah penjelasan tentang navigation and routing Flutter yang perlu Anda ketahui ketika ingin belajar Flutter. Jika Anda tertarik untuk belajar Flutter secara lebih mendalam, jangan lupa kunjungi Tutorial Dart di Codekey.
Codekey adalah media untuk Anda yang ingin belajar bahasa pemrograman secara gratis dan dapat diakses kapan saja serta di mana saja.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
