Update dan fungsi terbaru Navigator 2.0 pada Flutter

Illustration by Teddy Tri Murdianto

image source

Dalam perkembangannya flutter kini telah menyediakan update terbaru pada Navigator versi 2.0. Seperti yang telah banyak kawan developer ketahui tentang fungsi Navigator 1.0. pada flutter untuk menavigasi kumpulan routes yang ada pada screens atau pages. Artikel saat ini akan membahas tentang API Navigator 2.0 pada flutter yang mulai dikenalkan pada versi 1.22.

Kemudian apasih yang membedakan antara versi Navigator 1.0 dan 2.0?

API baru ini sebenarnya tidak terlalu berubah dari navigator versi sebelumnya, melainkan hanya menambahkan API declarative. Dimana navigator di versi flutter sebelumnya hanya memiliki API yang bersifat imperative.

Photo by Kelly Sikkema on Unsplash

Lalu perbedaan imperative dan declarative itu bisa dilihat darimana?

Imperative bisa diibaratkan saat kita memberi arah secara lengkap kepada supir taksi untuk menuju ke tempat yang kita tuju. Seperti dari Kantor A, kemudian lurus, belok kanan, lalu belok kiri, dan berhenti pas di depan minimarket. Informasi yang diberikan sangat lengkap sehingga si supir taksi tadi mendapatkan arahan yang jelas ke tempat tujuan.

Apabila diimplementasikan dalam contoh code dapat digambarkan sebagai berikut:

Navigator.of(context).pop();
Navigator.of(context).pushNamed('/dashboard');
onGenerateRoute: (route) { 
 if (route.name == '/') {   
  return MaterialPageRoute(builder: (context){     
   return DashboardPage();   
 }); 
} 
.....

Declarative bisa diibaratkan saat kita hanya memberikan alamat yang akan kita tuju kepada supir taksi secara gamblang. Semisal “langsung berangkat ke minimarket A ya pak!”.

Ketika diimplementasikan dalam contoh code bisa digambarkan sebagai berikut:

Navigator( 
 pages: [   
 
  MaterialPage(child: DashboardPage()),   
  MaterialPage(child: CartPage()),   
... 
 ],
),

Navigator sebelumnya yaitu navigator 1.0 yang bersifat imperative sudah sangat cocok digunakan di mobile apps yang memiliki screen saling menumpuk.

image source

API imperative dari Navigator diimplementasikan sebagai metode statis di Navigator, yang diteruskan ke metode instance di NavigatorState. API ini memungkinkan pengembang untuk mendorong route baru ke Navigator dan menghapus yang sudah ada. API ini sering digunakan untuk menanggapi masukan pengguna dari dalam aplikasi.

Semisal ketika pengguna menekan tombol kembali di AppBar, pop() dipanggil untuk menghapus route paling atas. Saat pengguna mengklik elemen untuk membuka tampilan mendetail, push() dipanggil untuk menunjukkan route dengan informasi mendetail tentang elemen yang diklik.

Seperti yang diterapkan, API imperative memungkinkan modifikasi yang sangat bertarget dari tumpukan riwayat tanpa menawarkan banyak fleksibilitas. Jadi pengembang tidak mungkin untuk dengan bebas mengubah dan mengatur ulang tumpukan riwayat sesuai keinginan mereka.

Photo by Ferenc Almasi on Unsplash

Dengan penjelasan diatas maka bisa kita simpulkan bahwa navigator 1.0 tidak cocok digunakan dalam pembuatan sebuah web app. Oleh sebab itu kita bisa menggunakan navigator 2.0 jika anda ingin pengguna mendapatkan pengalaman web yang normal seperti :

• Dapat menggunakan tombol forward dan back
• Memiliki riwayat atau histori pencarian
• Menangani pengguna saat mengubah url situs web
• Memperlihatkan url yang berbeda di berbeda halaman

Photo by Kelly Sikkema on Unsplash

API Navigator 2.0 juga menambahkan class baru ke framework untuk membuat layar aplikasi menjadi fungsi dari status aplikasi dan untuk memberikan kemampuan untuk mengurai route dari platform yang mendasarinya (seperti URL web). Berikut apa saja yang baru:

• Page → untuk menyetel tumpukan riwayat navigator secara declaratively, kita akan memberikan daftar objects Halaman ke widget Navigator dalam konstruktornya. objects halaman tidak dapat diubah dan menjelaskan rute yang harus ditempatkan ke dalam tumpukan riwayat Navigator.
• Router → widget baru yang berfungsi sebagai dispatcher untuk membuka dan menutup halaman aplikasi. Ini membungkus Navigator dan mengkonfigurasi daftar Halamannya saat ini berdasarkan status aplikasi saat ini. Selain itu, Router juga mendengarkan kejadian dari sistem operasi dan dapat mengubah konfigurasi Navigator dalam menanggapinya.
• RouterInformation → yang mengambil RouteInformation dari RouteInformationProvider dan menguraikannya menjadi tipe data yang ditentukan pengguna.
• RouterDelegate → mendefinisikan perilaku khusus aplikasi tentang bagaimana Router mempelajari tentang perubahan dalam status aplikasi dan bagaimana ia menanggapinya. Tugasnya adalah mendengarkan RouteInformationParser dan status aplikasi dan membangun Navigator dengan daftar Pages saat ini.
• BackButtonDispatcher → reports saat penekanan tombol kembali ke Router.

image source

Untuk contoh penerapannya anda bisa melihat di link berikut ini.

Flutter navigator versi berapakah yang cocok untuk anda? Apakah perlu untuk update ke versi terbaru? Itu semua kembali kepada kebutuhan masing-masing. Jika ingin menambahkan fitur shortcut dalam framework untuk memudahkan user, sebaiknya anda menggunakan versi update Navigator 2.0 terbaru dari Flutter.

Semoga artikel ini dapat sedikit membantu dalam memudahkan pekerjaan para developer dan jangan lupa untuk keep hustle!

Contributor: Bimo Tri Widodo