Flutter Mobile Development · レッスン

ディープリンクと URL ナビゲーション

Flutter アプリでディープリンクと URL ベースのナビゲーションを扱い、外部リンクや Web の URL バーからユーザーを適切な画面へ誘導する方法を学びます。

レッスン 4/413 ステップ

「ディープリンクと URL ナビゲーション」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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.

無料で開始

AI チューターと学ぶ Dart — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 88

無料で学習を始めるコース全体を表示

よくある質問

「ディープリンクと URL ナビゲーション」レッスンは無料ですか？

はい。「ディープリンクと URL ナビゲーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「ディープリンクと URL ナビゲーション」で何を学びますか？

Flutter アプリでディープリンクと URL ベースのナビゲーションを扱い、外部リンクや Web の URL バーからユーザーを適切な画面へ誘導する方法を学びます。ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「ディープリンクと URL ナビゲーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Flutter Mobile Developmentに戻る