Передача параметров в глубоких ссылках в Flutter

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Глубокая ссылка — это мощная функция, позволяющая вашему приложению открывать конкретные экраны из внешних источников — например, уведомлений, писем…

Глубокая ссылка — это мощная функция, позволяющая вашему приложению открывать конкретные экраны из внешних источников — например, уведомлений, писем, веб-сайтов или даже других приложений. Но вот где начинается магия, когда вы можете передавать параметры через эти ссылки.

Представьте себе:
👉 Ссылка вроде myapp://profile/123 открывает профиль пользователя напрямую.
Или myapp://product/456 открывает конкретную страницу товара в вашем приложении для покупок.
Вот такая сила у параметров глубоких ссылок.

В этой статье давайте разберём, как передавать и получать параметры из глубоких ссылок в Flutter, используя как глубокие ссылки на основе URI, так и Firebase Dynamic Links.

🚀 Что вы узнаете

• Настройте глубокие ссылки в Flutter.
• Разбирайте и извлекайте динамические параметры из URL.
• Направляйте пользователей на конкретные экраны на основе этих параметров.

🛠️ Инструменты и пакеты

• uni_links или go_router (для глубоких ссылок)
• firebase_dynamic_links (опционально для кроссплатформенных умных ссылок)
• Ваш механизм маршрутизации Flutter (Navigator 2.0 / GoRouter / AutoRoute)

🔧 Шаг 1: Определите структуру глубокой ссылки

Допустим, ваше приложение поддерживает следующие глубокие ссылки:

• myapp://profile/123
• myapp://product/456
• myapp://chat/789?ref=notification

Каждая из них содержит путь (например, profile/123) и может включать параметры запроса (например, ?ref=notification).

📥 Шаг 2: Обработка глубоких ссылок с помощью uni_links

Добавьте пакет:

dependencies:
  uni_links: ^0.5.1

Инициализируйте его в основном виджете:

void initDeepLinkListener() {
  uriLinkStream.listen((Uri? uri) {
    if (uri != null) {
      _handleDeepLink(uri);
    }
  });
}

void _handleDeepLink(Uri uri) {
  final pathSegments = uri.pathSegments;
  if (pathSegments.isNotEmpty) {
    final route = pathSegments[0]; // например, "profile"
    final id = pathSegments.length > 1 ? pathSegments[1] : null;
    if (route == "profile" && id != null) {
      Navigator.pushNamed(context, '/profile', arguments: id);
    }
    // Обработайте другие маршруты аналогично
  }
}

🔍 uri.pathSegments разбивает глубокую ссылку как ['profile', '123'].

✨ Пример: Глубокая ссылка на экран профиля

В вашей логике маршрутизации:

onGenerateRoute: (settings) {
  if (settings.name == '/profile') {
    final String userId = settings.arguments as String;
    return MaterialPageRoute(
      builder: (_) => ProfilePage(userId: userId),
    );
  }
}

И в ProfilePage:

class ProfilePage extends StatelessWidget {
  final String userId;
  const ProfilePage({required this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("User $userId")),
      body: Center(child: Text("Profile of user: $userId")),
    );
  }
}

🌐 Шаг 3: Настройка глубоких ссылок для Android и iOS

Android

В AndroidManifest.xml:

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

iOS

В Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

🔥 Бонус: Использование параметров запроса

Ссылка: myapp://profile/123?ref=campaign

Доступ к запросу:

final ref = uri.queryParameters['ref']; // "campaign"

Вы можете передать это на свой экран для аналитики, персонализации интерфейса и т.д.

🧠 Советы для продакшена

• Проверяйте входные данные глубоких ссылок, чтобы избежать сбоев.
• Логируйте, откуда приходят пользователи (например, ref, source, и т.д.).
• Комбинируйте с Firebase Dynamic Links для более умной поддержки кроссплатформенности.

✅ Итоги

Глубокие ссылки — это не просто URL — это мощные точки входа в ваше приложение. Когда вы передаете параметры, такие как идентификаторы или фильтры, вы обеспечиваете плавные и контекстные потоки пользователей.

Теперь вы можете:

• Открывайте профили пользователей, страницы продуктов, чат-ленты или любой пользовательский экран.
• Разбирайте параметры, такие как идентификаторы или данные запросов.
• Обеспечьте плавные, целенаправленные маршруты пользователей.

Если вам понравился этот гайд, нажмите 👏, добавьте его в закладки и подпишитесь на больше советов по разработке на Flutter!

Сообщите мне, если хотите версию с использованием GoRouter или AutoRoute тоже!