8.
Deep Links & Web URLs
Written by Vincent Ngo
Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as text.
Sometimes, opening your app and working through the navigation to get to a screen is just too much trouble for the user. Redirecting to a specific part of your app is a powerful marketing tool for user engagement. For example, generating a special QR code for a promotion that users can scan to visit that specific product in your app is a cool and effective way to build interest in the product.
In the last chapter, you learned how to use GoRouter to move between screens, navigating your app in a declarative way. Now you’ll learn how to deep link to screens in your app and explore web URLs on the web.
Take a look at how Fooderlich looks in the Chrome web browser:
By the end of this chapter, you’ll:
- Have a better understanding of the router API.
- Know how to support deep linking on iOS and Android.
- Explore the Fooderlich app on the web.
You’ll also explore deep links on iOS, Android and the web. You’ll learn how to direct users to any screen of your choice.
Note: You’ll need to install the Chrome web browser to view Fooderlich on the web. If you don’t have Chrome, you can get it here. The Flutter web project can run on other browsers, but this chapter only covers testing and development on Chrome.
Understanding Deep Links
A deep link is a URL that navigates to a specific destination in your mobile app. Think of deep links like a URL address you enter into a web browser to go to a specific page of a website rather than the home page.
Deep links help with user engagement and business marketing. For example, if you’re running a sale, you can direct the user to a specific product page in your app instead of making them search for it.
Imagine that Fooderlich has a website. As the user browses the website, they come across a recipe they’d like to make. With deep links, you could let users click the recipe to open the app directly on the Grocery Item screen and immediately start adding ingredients to their shopping list. This saves them time and makes the app more enjoyable.
- With deep linking, Fooderlich is more automated. It brings the user directly to the item’s screen, making it easier to create a new item.
- Without deep linking, the process is more manual. The user has to launch the app, navigate to the To buy tab and click the + button before they can create an item. That takes three steps instead of one and likely some head-scratching, too!
Types of Deep Links
There are three types of deep links:
Getting Started
Note: We recommend you use the starter project for this chapter rather than continuing with the project from the last chapter.
Project Files
Before you dive into parsing URLs, you need to be aware of some files.
Screens Folder
Within lib/screens/:
New Flutter Web Project
The starter project includes a pre-built Flutter web project.
Setting Up Deep Links
To enable deep linking on iOS and Android, you must add metadata tags on the respective platforms.
Setting Up Deep Links on iOS
Open ios/Runner/Info.plist. You’ll see some new key-value pairs, which enable deep linking for iOS:
<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>raywenderlich.com</string>
<key>CFBundleURLSchemes</key>
<array>
<string>fooderlich</string>
</array>
</dict>
</array>
Setting Up Deep Links on Android
Open android/app/src/main/AndroidManifest.xml. Here you’ll also find two new definitions in the <data> tag:
<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="fooderlich"
android:host="raywenderlich.com" />
</intent-filter>
fooderlich://raywenderlich.com/<path>
Overview of Fooderlich’s Paths
Fooderlich has many screens you can deep link to. Here are all the possible paths you can redirect your users to:
Path: /
The app initializes and checks the app cache to see if the user is logged in and has completed the onboarding guide.
Path: /:tab
Once the user logs in and completes onboarding, they’re redirected to /:tab. It contains one parameter, tab, which directs to a tab index. The screenshots below show that the tab index is 0, 1 or 2, respectively.
Path: /:tab/profile
The profile route is actually a sub route of home. From the home screen, the user can open their user profile from each of the three tabs.
Path: /:tab/item/:id
The item screen is also a sub route of home. You can present an item from any tab.
fooderlich://raywenderlich.com/<path>http://localhost:60738/#/<path>
Router API Recap
In the last chapter, you learned how to use GoRouter to set up routes and navigate to screens. GoRouter conveniently manages the Router API for you. How amazing is that? :]
Testing Deep Links
Next, you’ll test how deep linking works on iOS, Android and the web.
Testing Deep Links on iOS
In Android Studio, select an iOS device and press Run:
Deep Linking to the Home Screen
Enter the following in your terminal:
xcrun simctl openurl booted 'fooderlich://raywenderlich.com/1'
Deep Linking to the Profile Screen
Next, run the following command:
xcrun simctl openurl booted 'fooderlich://raywenderlich.com/1/profile'
Deep Linking to Create a New Item
Next, run the following command:
xcrun simctl openurl booted 'fooderlich://raywenderlich.com/2/item/new'
Resetting the Cache in the iOS Simulator
Recall that AppStateManager checks with AppCache to see whether the user is logged in or has onboarded. If you want to reset the cache to see the Login screen again, you have two options:
Testing Deep Links on Android
Stop running on iOS. Open Android Studio, select an Android device and click Play:
Deep Linking to the Home Screen
Enter the following in your terminal:
~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d 'fooderlich://raywenderlich.com/1'
Deep Linking to the Profile Screen
Next, run the following command:
~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d 'fooderlich://raywenderlich.com/1/profile'
Deep Linking to Create New Item
Next, run the following command:
~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d 'fooderlich://raywenderlich.com/1/item/new'
Resetting the Cache in Android
If you need to reset your user cache:
Running the Web App
Stop running on Android. In Android Studio, select Chrome (web) and click Run:
Key Points
- The app notifies
RouteInformationProviderwhen there’s a new route. - The provider passes the route information to
RouteInformationParserto parse the URL string. - The parser converts route information state to and from a URL string.
-
GoRouterconverts route information state to and from aRouteMatchList. -
GoRoutersupports deep linking and web browser address bar paths out of the box. - In development mode, the Flutter web app doesn’t persist data between app launches. The web app generated in release mode will work on other browsers.
Where to Go From Here?
Flutter render’s web apps in two different ways. Explore how that works in the Flutter documentation on web renderers.