Passing Parameters in Deep Links in Flutter

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Deep linking is a powerful feature that allows your app to open specific screens from external sources — like notifications, emails…

Deep linking is a powerful feature that allows your app to open specific screens from external sources — like notifications, emails, websites, or even other apps. But things really get magical when you can pass parameters through those links.

Imagine this:
👉 A link like myapp://profile/123 opens directly to a user's profile.
Or myapp://product/456 opens a specific product page in your shopping app.
That's the power of deep link parameters.

In this story, let's break down how to pass and retrieve parameters from deep links in Flutter using both URI-based deep linking and Firebase Dynamic Links.

🚀 What You'll Learn

• Set up deep linking in Flutter.
• Parse and extract dynamic parameters from URLs.
• Navigate users to specific screens based on those parameters.

🛠️ Tools & Packages

• uni_links or go_router (for deep linking)
• firebase_dynamic_links (optional for cross-platform smart links)
• Your Flutter routing mechanism (Navigator 2.0 / GoRouter / AutoRoute)

🔧 Step 1: Define Your Deep Link Structure

Let's say your app supports the following deep links:

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

Each of these contains a path (like profile/123) and may include query parameters (like ?ref=notification).

📥 Step 2: Handle Deep Links with uni_links

Add the package:

dependencies:
  uni_links: ^0.5.1

Initialize it in your main widget:

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]; // e.g., "profile"
    final id = pathSegments.length > 1 ? pathSegments[1] : null;
    if (route == "profile" && id != null) {
      Navigator.pushNamed(context, '/profile', arguments: id);
    }
    // Handle more routes similarly
  }
}

🔍 uri.pathSegments splits the deep link like ['profile', '123'].

✨ Example: Deep Link to a Profile Screen

In your routing logic:

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

And in 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")),
    );
  }
}

🌐 Step 3: Android and iOS Deep Link Setup

Android

In 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

In Info.plist:

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

🔥 Bonus: Use Query Parameters

Link: myapp://profile/123?ref=campaign

Access query:

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

You can pass this to your screen for analytics, UI personalization, etc.

🧠 Tips for Production

• Validate your deep link inputs to avoid crashes.
• Log where users are coming from (e.g., ref, source, etc.).
• Combine with Firebase Dynamic Links for smarter cross-platform support.

✅ Wrapping Up

Deep links are more than just URLs — they're powerful entry points into your app. When you pass parameters like IDs or filters, you enable seamless and contextual user flows.

Now you can:

• Open user profiles, product pages, chat threads, or any custom screen.
• Parse parameters like IDs or query data.
• Deliver smooth, targeted user journeys.

If you found this guide helpful, tap that 👏, bookmark it, and follow for more pro Flutter dev tips!

Let me know if you'd like a version using GoRouter or AutoRoute as well!

If you found this story helpful, you can support me at Buy Me a Coffee!