How to Flutter Navigation 2.0 ?

Flutter mengeluarkan mekanisme baru untuk routing antar halaman, gimana cara penggunaannya ?

Photo by Roman Synkevych on Unsplash

Introduction

Navigation 2.0 merupakan cara terbaru untuk menavigasi halaman di flutter. Mungkin beberapa dari kalian udah tau jika baca baca di dokumentasi official flutter. Kita akan mempelajari bagaimana API ini memungkinkan kontrol yang lebih baik di aplikasi.

Nah, apakah dengan adanya navigation 2.0 ìni menyebabkan API navigation yang sebelumnya tidak digunakan (REPLACE). Tentu tidak, navigation 2.0 ini hanya menambahkan API saja, Artinya Navigation 1.0 Masih bisa digunakan.

Ada beberapa masalah ketika menggunakan Navigation 1.0, seperti issue pada gambar dibawah ini :

https://github.com/flutter/flutter/issues/12146

Masalah diatas adalah susahnya push àtau memunculkan banyak page. Dan juga menghapus halaman dibawah halaman saat ini. Issue ini bisa diselesaikan dengan Navigation 2.0.

Tapi jika kalian suka mekanisme navigasi yang lama tidak apa — apa.

Diartikel ini, kita akan belajar bagaimana menerapkan Navigation 2.0 dengan menavigasi halaman ke halaman lain.

Kelebihan pake Navigation 2.0

• Router / Navigator dapat disarangkan (Nested) dan menekan tombol back. sistem memunculkan route dari Navigator yang paling sesuai
• NavigatorAPI yang imperative (push(), pop(), replace(), dll)

Navigation 2.0

API Navigator 2.0 menambahkan kelas baru di API nya, berfungsi dari status aplikasi dan memberikan kemampuan untuk mengurai route dari platform yang mendasarinya (seperti URL web). Berikut apa saja yang baru di Navigation 2.0 :

• Page - static object yang digunakan untuk mengatur riwayat halaman navigator.
• Router- mengkonfigurasi daftar halaman yang akan ditampilkan oleh Navigator. Biasanya daftar halaman ini berubah berdasarkan platform yang mendasarinya, atau pada status aplikasi yang berubah.
• RouteInformationParser, yang mengambil RouteInformationdari RouteInformationProviderdan menguraikannya menjadi tipe data yang ditentukan pengguna.
• RouterDelegate- mendefinisikan perilaku khusus aplikasi tentang bagaimana Routermempelajari tentang perubahan dalam status aplikasi dan bagaimana menanggapinya. Tugasnya adalah mendengarkan RouteInformationParserdan status aplikasi dan membangun Navigatordengan daftar saat ini Pages.
• BackButtonDispatcher- Memberi tahu ke Router bahwa ada penekanan back button (kembali).

Berikut diagram nya dari penjelasan diatas :

https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

Contoh kode

Kali ini kita akan menerapkan Navigation 2.0 pada aplikasi sederhana

Sebelum itu, kalian harus membuat project flutter baru atau langsung saja clone github saya link

Kalau sudah berikut isi dari file main.dart. Lebih tepat nya pada MyAppState class nya

MyApp

Kemudian buat InformationRoutes nya. Bagian ini berisi konfigurasi apa saja rute dari aplikasi kita.

Setelah itu kita buat RouteDelegate nya. RouteDelegate menlistener route information ketika ada sebuah push route atau back route. Bisa dibilang Route Delegate ini sebagai Controller Routenya.

Disini juga ada Widget Navigator Dimana berisi widget page yang mendefinisikan Halaman — halaman pada aplikasi sesuai InformationRoute().

Nah terakhir di screen nya tinggal membuat navigasinya saja

Nah kalau kalian masih bingung boleh lihat di github saya

farhanroy/playground-flutter

Referensi

• https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade