Flutter Deeplink

Deeplink Implementation at VTenh

Thea Choem

​​Who am I?

• ​Name: Thea Choem

• Mobile Developer at BookMeBus

• Student at NIPTICT (Generation 6)

Poll

Deeplink, Have you heard about it before?

• Yes 😉

• No 🤷

• Have implemented 😎

​What is Deeplink?

https://medium.com/wolox/ios-deep-linking-url-scheme-vs-universal-links-50abd3802f97

https://stackoverflow.com/questions/46169025/android-deep-links-and-app-links-confused

​Content: Steps to Deeplink

1. ​Hosting verification files

2. Setup Deeplink

3. ​Handling the incoming link in the app.

1. Hosting verification files

​1.1. Android

Host assetlinks.json under /.well-known/assetlinks.json

​Examples:

www.vtenh.com/.well-known/assetlinks.json

www.google.com/.well-known/assetlinks.json

Read more: https://simonmarquis.github.io/Android-App-Linking/#app-links

​1.2. IOS

Host the .well-known/apple-app-site-association

​​Where to get appID? 🤷‍♂️

eg. ​Q123456789.com.vtenh.app.store

Read more: https://developer.apple.com/account/#!/membership/Q123456789

2. Setup Deeplink

Packages

Run this command with Flutter:

Read more: https://pub.dev/packages/uni_links

Get initial & Stream links

lib/main.dart

​2.1. Android Configuration

Make sure to set android:launchMode="singleInstance"

​android/app/src/main/AndroidManifest.xml

​Launch modes (launchMode)

1. ​standard

2. ​singleTop

3. ​singleTask

4. ​singleInstance

Read more: https://medium.com/android-news/android-activity-launch-mode-e0df1aa72242

There are 2 types of Android Deeplink:

• ​Deep Links can have any custom scheme and do not require a host, nor a hosted file.

• ​​App Links only work with HTTPS scheme and require a specified host, plus a hosted file - assetlinks.json

​(

​2.1. Android Configuration

Add string value to android resources - strings.xml

android/app/src/main/res/values/strings.xml

​Add intents filter: Deep Links (HTTPS)

​Add intents filter: Deep Links (HTTP)

​Add intents filter: App Links

close #1 configure android deeplink by theachoem · Pull Request #4 · theachoem/flutter-deeplink-example · GitHub

You can open this webpage in a new tab.

Copy link

Open in new tab

​2.2. IOS Configuration

Set schemes:

ios/Runner/Info.plist

​2.2. IOS Configuration

Set associated domains:

ios/Runner/Runner.entitlements

close #2 configure ios deeplink by theachoem · Pull Request #5 · theachoem/flutter-deeplink-example · GitHub

You can open this webpage in a new tab.

Copy link

Open in new tab

3. ​Handling the incoming link in the app.

Flutter Navigations:

What will we do:

Packages

Run this command with Flutter:

Read more: https://pub.dev/packages/flutter_deep_linking

Generate the route:

Navigate to the url:

close #3 configure route & navigation by theachoem · Pull Request #6 · theachoem/flutter-deeplink-example · GitHub

You can open this webpage in a new tab.

Copy link

Open in new tab

We've done, Quiz time!

Multiple Choice

How many types of android launchMode?

• 1

• 2

• 3

• 4

Multiple Choice

What is the recommend launchMode for android deeplink?

• ​standard

• singleTop

• singleTask

• singleInstance

Multiple Choice

Where to host android verification files?

• .well-known/

  assetlinks.json

• well-known/

  apple-app-site-association

Thank you for your attentions

Any question?