Flutter Mobile Development · 课时

深层链接与 URL 导航

学习如何在 Flutter 应用中处理深层链接和基于 URL 的导航，让外部链接与网页 URL 栏能够将用户路由到正确界面。

深层链接与 URL 导航 是 CoddyKit 上的免费 Flutter Mobile Development 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Flutter Mobile Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Flutter Mobile Development 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

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.

常见问题解答

「深层链接与 URL 导航」课时是免费的吗？

是的 — 「深层链接与 URL 导航」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Flutter Mobile Development 课程的其余内容，请升级到 CoddyKit PRO。 Flutter Mobile Development 课程共包含 4 节课。

「深层链接与 URL 导航」这节课中我会学到什么？

学习如何在 Flutter 应用中处理深层链接和基于 URL 的导航，让外部链接与网页 URL 栏能够将用户路由到正确界面。你通过在浏览器中直接运行的动手代码来练习 Flutter Mobile Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Flutter Mobile Development 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Flutter Mobile Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「深层链接与 URL 导航」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Flutter Mobile Development 课中编写并运行代码吗？

能。每节 Flutter Mobile Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Flutter Mobile Development