Chapters

Hide chapters

Flutter Apprentice

Fourth Edition · Flutter 3.16.9 · Dart 3.2.6 · Android Studio 2023.1.1

Section II: Everything’s a Widget

Section 2: 5 chapters
Show chapters Hide chapters

Section IV: Networking, Persistence & State

Section 4: 6 chapters
Show chapters Hide chapters

9. 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 scrambled 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 Yummy 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 Yummy app on 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 Yummy 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 with 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.

Just imagine, your app Yummy is a user-friendly food app that allows customers to quickly scan a QR code at restaurants, instantly access menus and seamlessly deep-link to detailed restaurant pages in for an enhanced dining experience.

With deep linking, Yummy is more automated. It brings the user directly to the restaurant page making it easier to view the menu. Without deep linking, the process is more manual. The user has to launch the app, navigate to the Explore tab find the correct restaurant, or search the restaurant name, and finally get to the restaurant page to view the menu. 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 diving in, you need to be aware of some new files.

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. These tags have already been added to the starter project.

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>kodeco.com</string>
  <key>CFBundleURLSchemes</key>
  <array>
  <string>yummy</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="yummy"
  android:host="kodeco.com" />
</intent-filter>
...
yummy://kodeco.com/<path>

Overview of Yummy Paths

Yummy has many screens you can deep link to. Here are all the possible paths you can direct your users to:

Path: /

The app initializes and checks the app cache to see if the user is logged in.

mikrn://jimewa.jup/cujon xoywj://fizuco.ked/

Path: /:tab

Once the user logs in, 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.

maxpw://sikiko.geh/2 bazzs://xukaku.yol/7 cadsw://soruku.hoq/9

Path: /restaurant/:id

The restaurant page is a sub route of the Explore page. You can present a restaurant from any tab.

gudnr://fudohe.kiw/0/vekyeenurc/3

yummy://kodeco.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? :]

Mam saeye Gexayoag vepum ec Rmntad qosogaxocoomt Bamiewvm qwuqkut cu Qusojakay Xuliavd Cab solkh xanwahimen Jazajeyih few livoaby Qajb zahvup ckomvuz Foz obujauh veozu Cis sot duune Irapeum qiida Rih uzfubp Osafufisw Bdrboz Miexuq Rojupavi Ruezan (Mihdah) ZojfGefkol Kocwazwnew XaaqeIwrarducuib Gluloruc NiuboEqcejpoveag Yadmip Oyn Rceye

Rey zeepo Doxabuut peqoc iw Pjmfab yabeqatejiimh Dumuuprn rzulzus wa Zagayuxuz Guliulr Nim cupnf wacfimiguh Yoqowanor hil xemuadk Ceps folred dmirzut Xov omanuup goone Qun rog ziugi Afetuam juaso Feq evvocn Uqamarogx Fqsmas Zoihow Licevigo Xiawuz (Sotkas) BaffRullar Zivzurtlol YuowuEljohtasauj Lselizir TeikoOnxellekaec Bechod Est Zpocu

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 Orders Page

Enter the following in your terminal:

xcrun simctl openurl booted 'yummy://kodeco.com/1'

Deep Linking to the Account Page

Next, run the following command:

xcrun simctl openurl booted 'yummy://kodeco.com/2'

Deep Linking to the Home Page

Next, run the following command:

xcrun simctl openurl booted 'yummy://kodeco.com/0'

Deep Linking to a Specific Restaurant

Next, run the following command:

xcrun simctl openurl booted 'yummy:/0/restaurant/2'

Resetting the Cache in the iOS Simulator

Recall that AppStateManager checks with AppCache to see whether the user is logged in. 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. In Android Studio, select an Android emulator or device and click the Run button:

Deep Linking to the Orders Page

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 'yummy://kodeco.com/1'

Deep Linking to the Account Page

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 'yummy://kodeco.com/2'

Deep Linking to Restaurant Page

Next, run the following:

~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d 'yummy://kodeco.com/2/restaurant/1'

Resetting the Cache in Android

If you need to reset your emulator cache:

Running the Web App

Stop running on Android. In Android Studio, select Chrome (web) and click Run:

Key Points

  • The app notifies RouteInformationProvider when there’s a new route to navigate to.
  • The provider passes the route information to RouteInformationParser to parse the URL string.
  • The parser converts the route information state to and from a URL string.
  • GoRouter converts route information state to and from a RouteMatchList.
  • GoRouter supports 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 renders web apps in two different ways. Explore how that works in the Flutter documentation on web renderers.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now