Google Developers Indonesia Blog: Flutter web: Membuka URL menggunakan rute bernama

Flutter web: Membuka URL menggunakan rute bernama

16 April 2020

Rute bernama bisa digunakan untuk membuka antar halaman dalam aplikasi seluler Flutter, tetapi juga berfungsi untuk URL di aplikasi web Flutter. Artikel ini menjelaskan cara menambahkan rute bernama ke aplikasi Anda, dan bagaimana Anda bisa menyesuaikannya, agar memiliki pencocokan pola di dalam rute.

Menetapkan rute bernama

Rute bernama bisa ditambahkan ke aplikasi Anda dengan menetapkannya dalam class MaterialApp. Properti MaterialApp.routes berisi daftar setiap rute bernama dan widget tampilan terkait. Properti MaterialApp.initialRoute menentukan rute apa yang ditampilkan saat aplikasi dimulai. Dengan demikian, initialRoute harus didefinisikan dalam properti routes. Misalnya:

Praktik terbaik agar kode Anda selalu terorganisir adalah dengan menempatkan rute bernama di dalam variabel statis, misalnya, pada widget itu sendiri:

Berikutnya, refactor MaterialApp.routes dengan rute bernama sekarang didefinisikan sebagai variabel statis:

Membuka antar halaman

Untuk membuka dari satu halaman ke halaman lainnya, cukup dorong rute bernama ke navigator:

Lihat contoh interaktif lengkapnya di DartPad. Jika Anda membangun dan menjalankan sendiri aplikasi untuk web, cukup ketik /#/overview di dalam browser web. Ini akan mendorong rute bernama overview ke Navigator, dan membawa Anda ke widget OverviewPage, seperti yang bisa Anda lihat di GIF berikut:

Logika perutean untuk URL dinamis

Suatu saat Anda mungkin perlu menangani skenario yang lebih kompleks daripada yang ditangani di sini, seperti memiliki pencocokan pola di dalam rute untuk mengizinkan URL dinamis. Untuk memperluas contoh ini, anggaplah Anda memiliki banyak artikel berbeda di halaman ringkasan. Untuk setiap artikel, Anda ingin dapat membukanya secara langsung melalui URL:

Menetapkan rute bernama untuk semua artikel di dalam MaterialApp bukanlah hal yang mudah. Untuk kasus dinamis seperti itu, Anda perlu melakukan sesuatu yang lebih khusus. Saat tulisan ini dibuat, saluran stabil Flutter memiliki versi v1.12, dan tidak ada cara sederhana untuk melakukannya, meskipun ada rencana untuk menambahkan dukungan perutean yang lebih canggih dengan Navigator baru.

Untuk saat ini, Anda bisa menggunakan paket eksternal, misalnya paket Fluro menyediakan perutean yang lebih canggih. Paket ini memberikan pencocokan pola karakter pengganti dalam rute, serta penguraian untuk string kueri dalam URL. Mungkin ada banyak paket lain yang tersedia, jadi silakan tinggalkan komentar dengan nama paket favorit Anda.

Jika Anda siap menghadapi tantangan, Anda juga bisa mendapatkan rute dinamis dengan memanfaatkan properti MaterialApp.onGenerateRoute. Gunakan ini untuk menulis logika perutean ketika rute bernama tidak berada di dalam MaterialApp.routes.

Untuk setiap rute, tetapkan Path dengan pola RegEx. Jika rute bernama cocok dengan pola, tampilkan widget yang terkait. Berikutnya, tetapkan class Path untuk mendukungnya:

Untuk halaman ringkasan dan rute beranda, terlihat cukup sederhana dan mirip dengan yang Anda miliki sebelumnya. Contoh berikut membuat pola RegEx yang cocok dengan slug (huruf kecil dengan tanda hubung) yang digunakan untuk menemukan artikel yang sesuai:

Yang tersisa adalah membuat fungsi onGenerateRoute untuk MaterialApp. Jika rute bernama saat ini (settings.name) ditetapkan dalam daftar lokasi, tampilkan widget terkait. Pastikan untuk memberikan kecocokan bernama di RegEx (dalam contoh ini adalah slug). Jika tidak ditemukan kecocokan, cukup tunjukkan null, WidgetsApp.onUnknownRoute akan dipanggil untuk menangani kasus-kasus seperti:

Pastikan untuk menetapkan fungsi onGenerateRoute dalam class MaterialApp; Anda telah mengimplementasikan URL dinamis dengan Flutter, menggunakan rute bernama! Anda bisa melihat contoh interaktif lengkapnya di DartPad.

Kesimpulan

Ketika Anda memilih untuk menulis logika rute khusus sendiri, atau cukup menggunakan dukungan rute yang ada di dalam MaterialApp, Anda mendapatkan dukungan URL secara default dengan aplikasi Flutter di web, saat menggunakan rute bernama. Mengimplementasikan rute bernama juga bisa memastikan bahwa Anda memisahkan logika presentasi dari logika perutean, yang menyebabkan duplikasi kode lebih sedikit.

Beri tahu kami di komentar solusi apa yang Anda gunakan dalam aplikasi Anda, apakah menulis logika khusus sendiri atau menggunakan paket eksternal.
Happy hacking!