Flutter Apprentice (V3.0) – Deep Links & Web URLs

Understanding deep links

Deep links are urls that map to specific places in your app. They’re basically URLS like we see in web apps.

It looks like we’re doing URI Schemes just like protocol handlers like what I’ve seen in VS Code.

fooderlich://raywenderlich.com/home

Types of deep links

URI Schemes – What I’ve seen around in applications like VSCode, for example, when I’m authing to GitHub to enable sync

iOS Universal Links – looks like it’s file based, like kinda like an hosts file and I’m not about this life. I think URI Schemes can be implemented in go_router so I may as well stick with that.

Android App Links – LIke iOS Universal links but are straight HHTP URLS and are associated with a web app.

Getting started

Project files

Nothing of note.

Screens folder

Nothing of note.

Models folder

Nothing of note.

New packages

Nothing of note.

New Flutter web project

Nothing of note.

Setting up deep links

Setting up deep links on iOS

Explains that these are setup in XML files

Setting up deep links on Android

Explains that these are setup in XML files

Overview of Fooderlich’s paths

Router API Recap

What is a RouterDelegate responsible for:

• consumes app state to build and config page lists
• retrieving and setting up the initial route when the app launches.
• Listening for new intents when you show a new route.
• Liten to request by the os to pop a route via BackButtonDispatcher

What is a router?

• A Widget that extends RouterDelegate. The router ensures that the messages pass to the RouterDelegate.

What does Navigator do?

• Defines a stack of MaterialPage’s in a declarative way. it also handles any onPagePop() events.

What does BackButtonDispatcher do?

• Handles Platform specific back button presses.

Deep links under the hood

Converting a URL to an app state

Converting the app state to a URL string

Testing deep links

Testing deep links on iOS

Deep linking to the Home screen

Deep linking to the Profile screen

Deep linking to create a new item

Resetting the cache in the iOS simulator

Testing deep links on Android

Deep linking to the Home screen

Deep linking to the Profile screen

Deep linking to Create New Item

Resetting the cache in Android

Running the web app

Key points

• The app notifies RouteInformationProvider when there’s a new route.
• The provider passes the route information to RouteInformationParser to parse the URL string.
• The parser converts app state to and from a URL string.
• AppLink models the navigation state. It is a user-defined data type that encapsulates information about a URL string.
• In development mode, the Flutter web app does not persist data between app launches. The web app generated in release mode will work on the other browsers.