Last Updated on May 5, 2022 by
Ketika Anda memiliki suatu bisnis tertentu yang berbasis digital, Anda mungkin ingin menautkan konten Anda ke dalam konten lainnya seperti acara, pembaruan berita, dan lainnya. Dengan Flutter deep link, Anda dapat dengan mudah melakukan hal ini.
Pada artikel tutorial Dart kali ini, kami akan membahas tentang Flutter Deep Link untuk Anda yang ingin belajar Flutter. Cara ini bisa Anda gunakan untuk menautkan konten dengan mudah. Simak terus pembahasan berikut ini jika Anda ingin tahu.
Table of Contents
Apa Itu Flutter Deep Link?
Framework Flutter telah menyediakan deep link atau tautan dalam yang berguna dalam memberi Anda tautan browser web yang mengarah ke bagian tertentu dari aplikasi yang sudah diinstal. Flutter deep link ini juga dapat diatur untuk mengarahkan pengguna ke halaman konten tertentu yang berhubungan dengan bisnis Anda.
Misalnya, jika Anda ingin berbagi artikel ini dengan teman, maka Anda akan mengirim URL yang menunjuk ke artikel ini, bukan situs blog.logrocket.com untuk menavigasi dan mencari artikel itu sendiri. Ini berarti Anda perlu menangani cara aplikasi Anda dipicu secara manual atau menggunakan tautan dalam.
Selain itu, aplikasi Anda mungkin sudah berjalan saat tautan dalam dipicu, jadi Anda juga perlu menangani klik tautan dalam di latar belakang yang menjalankan aplikasi.
Flutter mendukung deep linking di iOS, Android, dan browser web. Membuka URL menampilkan layar itu di aplikasi Anda. Dengan langkah-langkah berikut, Anda dapat meluncurkan dan menampilkan rute dengan menggunakan rute bernama (baik dengan parameter rute atau onGenerateRoute), atau dengan menggunakan widget Router untuk Flutter Deep Link Anda.
Jika Anda menjalankan aplikasi di browser web, tidak diperlukan penyiapan tambahan. Jalur rute ditangani dengan cara yang sama seperti tautan dalam iOS atau Android. Secara default, aplikasi web membaca jalur tautan dalam dari fragmen url menggunakan pola: /#/path/to/app/screen, tetapi ini dapat diubah dengan mengonfigurasi strategi URL untuk aplikasi Anda.
Aktifkan tautan dalam di Android
Tambahkan tag metadata dan filter maksud ke AndroidManifest.xml di dalam tag <activity> dengan nama “.MainActivity”:
<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="http" android:host="flutterbooksample.com" />
<data android:scheme="https" />
</intent-filter>
Aktifkan tautan dalam di iOS
Tambahkan dua kunci baru ke Info.plist di direktori ios/Runner:
<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>flutterbooksample.com</string>
<key>CFBundleURLSchemes</key>
<array>
<string>customscheme</string>
</array>
</dict>
</array>
CFBundleURLName adalah URL unik yang digunakan untuk membedakan aplikasi Anda dari aplikasi lain yang menggunakan skema yang sama. Skema (customscheme://) juga bisa unik.
Bermigrasi dari tautan dalam berbasis plugin
Jika Anda telah menulis sebuah plugin untuk menangani tautan dalam, seperti yang dijelaskan dalam “Tautan Dalam dan aplikasi Flutter” di Medium, plugin akan terus berfungsi hingga Anda memilih untuk ikut serta dalam perilaku ini dengan menambahkan FlutterDeepLinkingEnabled ke Info.plist atau flutter_deeplinking_enabled ke AndroidManifest.xml , masing-masing.
Behavior
Behavior dari Flutter sedikit berbeda berdasarkan platform dan apakah aplikasi diluncurkan dan dijalankan.
| Platform / Skenario | Penggunaan Navigator | Using Router |
| iOS (not launched) | Aplikasi mendapatkan initialRoute (“/”) dan beberapa saat setelah mendapatkan pushRoute | Aplikasi mendapatkan initialRoute (“/”) dan beberapa saat setelah menggunakan RouteInformationParser untuk mengurai rute dan memanggil RouterDelegate.setNewRoutePath, yang mengonfigurasi Navigator dengan Halaman yang sesuai. |
| Android – (not launched) | Aplikasi mendapatkan initialRoute yang berisi rute (“/ deeplink”) | Aplikasi mendapatkan initialRoute (“/deeplink”) dan meneruskannya ke RouteInformationParser untuk mengurai rute dan memanggil RouterDelegate.setNewRoutePath, yang mengonfigurasi Navigator dengan Halaman yang sesuai. |
| iOS (launched) | pushRoute disebut | Path diurai, dan Navigator dikonfigurasi dengan set Halaman baru. |
| Android (launched) | pushRoute disebut | Path diurai, dan Navigator dikonfigurasi dengan set Halaman baru. |
Itulah penjelasan tentang Flutter Deep Link untuk Anda yang ingin belajar Flutter. Ingin belajar bahasa Dart dan Flutter secara lebih mendalam? Kunjungi Codekey di https://codekey.id/ dan dapatkan berbagai materi dan tutorial terbaru seputar bahasa pemrograman.
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.
