Flutter Mobile Development · Lesson

Deep Linking & URL Navigation

Learn how to handle deep links and URL-based navigation in Flutter apps so external links and the web URL bar can route users to the right screen.

Deep Linking & URL Navigation is a free Flutter Mobile Development lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flutter Mobile Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Deep Linking Matters

Deep linking lets an external source — an email, a notification, or a browser URL — open a specific screen inside your app instead of the home page.

Improves user experience for shared content
Essential for marketing campaigns and notifications
On Flutter web, it ties your app to the browser URL bar

You will use a URL-based router to make this work cleanly.

Two Kinds of Deep Links

There are two common forms:

Custom scheme links like myapp://product/42
Universal / App Links using real https:// URLs

Universal links are preferred because they fall back to a website if the app is not installed.

Meet the Router API

Flutter's Router API (Navigator 2.0) maps URLs to screens. Packages like go_router wrap it in a friendly declarative API.

You define routes with path patterns, and the router parses incoming URLs for you.

final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (c, s) => HomeScreen()),
    GoRoute(path: '/product/:id', builder: (c, s) => ProductScreen(s.pathParameters['id']!)),
  ],
);

Path Parameters

The :id segment is a path parameter. When a user opens /product/42, you read it with state.pathParameters['id'].

This is how a deep link carries data into your screen.

GoRoute(
  path: '/product/:id',
  builder: (context, state) {
    final id = state.pathParameters['id'];
    return ProductScreen(productId: id!);
  },
);

Query Parameters

For optional values use query parameters: /search?q=phones&sort=price.

Read them via state.uri.queryParameters.

GoRoute(
  path: '/search',
  builder: (context, state) {
    final q = state.uri.queryParameters['q'] ?? '';
    return SearchScreen(query: q);
  },
);

Wiring the Router In

Use MaterialApp.router instead of MaterialApp so the app delegates navigation to the router.

MaterialApp.router(
  routerConfig: router,
  title: 'My App',
);

Navigating Programmatically

You can still navigate from code with context.go() (replace stack) or context.push() (add to stack).

ElevatedButton(
  onPressed: () => context.go('/product/42'),
  child: const Text('Open product'),
);

Android Configuration

For real https App Links on Android, add an intent-filter with autoVerify to AndroidManifest.xml and host an assetlinks.json file on your domain.

<intent-filter android:autoVerify="true">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="https" android:host="myapp.com" />
</intent-filter>

iOS Configuration

On iOS, configure Associated Domains in Xcode with applinks:myapp.com and host an apple-app-site-association file at your domain root.

<!-- Associated Domains entitlement -->
applinks:myapp.com

Handling Unknown Routes

Always provide an errorBuilder so a bad or unknown deep link shows a friendly 404 screen instead of crashing.

GoRouter(
  routes: [...],
  errorBuilder: (context, state) => const NotFoundScreen(),
);

Redirects & Guards

Use the redirect callback to guard routes — for example send unauthenticated users from /profile to /login.

GoRouter(
  redirect: (context, state) {
    final loggedIn = auth.isLoggedIn;
    if (!loggedIn && state.uri.path == '/profile') return '/login';
    return null;
  },
  routes: [...],
);

Quick Check

How do you read the value of id from a deep link matching /product/:id?

Recap

You learned how to add deep linking and URL navigation to a Flutter app:

Custom scheme vs universal/App Links
Path and query parameters with the Router API
Native config on Android and iOS
Error handling and route guards

Now external links and the browser URL bar can drive your app's navigation.

Frequently asked questions

Is the “Deep Linking & URL Navigation” lesson free?

Yes — the full text of “Deep Linking & URL Navigation” is free to read here on the web, and the Flutter Mobile Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flutter Mobile Development course, upgrade to CoddyKit PRO.

What will I learn in “Deep Linking & URL Navigation”?

Learn how to handle deep links and URL-based navigation in Flutter apps so external links and the web URL bar can route users to the right screen. You practise Flutter Mobile Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Flutter Mobile Development?

No prior experience is required. Flutter Mobile Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Deep Linking & URL Navigation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Flutter Mobile Development lesson?

Yes. Every Flutter Mobile Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Flutter Mobile Development