Flutter Mobile Development · Урок

Глубокие ссылки и навигация по URL

«Глубокие ссылки и навигация по URL» — бесплатный урок Flutter Mobile Development на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Flutter Mobile Development, подпишись на CoddyKit PRO. Курс Flutter Mobile Development содержит 4 уроков всего.

Чему я научусь в уроке «Глубокие ссылки и навигация по URL»?

Узнайте, как обрабатывать глубокие ссылки и навигацию на основе URL в приложениях Flutter, чтобы внешние ссылки и адресная строка браузера направляли пользователей на нужный экран. Ты практикуешь Flutter Mobile Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Flutter Mobile Development?

Предыдущий опыт не требуется. Flutter Mobile Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Глубокие ссылки и навигация по URL»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Flutter Mobile Development?

Да. Каждый урок Flutter Mobile Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Flutter Mobile Development