The Project | About Us | Contribute | Donations | License

HOME

Deep linking is a powerful feature in mobile applications that allows you to link directly to specific content within your app. This can enhance user experience by providing a seamless way to navigate to particular screens or functionalities from external sources such as emails, social media, or web pages.

Key Concepts

URL Schemes: Custom URL schemes allow your app to be opened via a URL. For example, myapp://profile/123 could open the profile screen for user ID 123.
Universal Links (iOS) / App Links (Android): These are standard web URLs that can open your app if it is installed, or fallback to a web page if it is not.
Navigation: Handling the navigation within the app when a deep link is triggered.

Setting Up Deep Linking

Configuring URL Schemes

iOS

Open your Info.plist file.
Add a new URL type with a unique scheme.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.example.myapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

Android

Open your AndroidManifest.xml file.
Add an intent filter to your main activity.

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask">
    <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" />
    </intent-filter>
</activity>

Handling Deep Links in Flutter

Adding Dependencies

Add the uni_links package to your pubspec.yaml file.

dependencies:
  uni_links: ^0.5.1

Listening for Deep Links

Create a method to handle incoming links and navigate to the appropriate screen.

import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  StreamSubscription _sub;

  @override
  void initState() {
    super.initState();
    initUniLinks();
  }

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

  Future<void> initUniLinks() async {
    _sub = getLinksStream().listen((String link) {
      if (link != null) {
        // Handle the deep link
        _navigateTo(link);
      }
    }, onError: (err) {
      // Handle error
    });
  }

  void _navigateTo(String link) {
    // Parse the link and navigate to the appropriate screen
    if (link.contains('profile')) {
      String userId = link.split('/').last;
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => ProfileScreen(userId: userId)),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Deep Linking Example'),
        ),
        body: Center(
          child: Text('Home Screen'),
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  final String userId;

  ProfileScreen({@required this.userId});

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

Testing Deep Links

iOS

Use the xcrun command to test deep links in the simulator.

xcrun simctl openurl booted myapp://profile/123

Android

Use the adb command to test deep links on an emulator or device.

adb shell am start -W -a android.intent.action.VIEW -d "myapp://profile/123" com.example.myapp

Practical Exercise

Task

Set up deep linking in your Flutter app.
Create a screen that displays user profile information.
Handle deep links to navigate to the profile screen with the user ID.

Solution

Configure URL Schemes: Follow the steps above to configure URL schemes for both iOS and Android.
Add Dependencies: Add the uni_links package to your pubspec.yaml.
Implement Navigation: Use the provided code example to handle deep links and navigate to the profile screen.

Common Mistakes

Incorrect URL Scheme: Ensure the URL scheme matches exactly in both the app configuration and the deep link.
Missing Permissions: Ensure your app has the necessary permissions to handle deep links.
Navigation Errors: Ensure the navigation logic correctly parses the deep link and navigates to the appropriate screen.

Conclusion

Deep linking is an essential feature for modern mobile applications, providing a seamless user experience by allowing direct navigation to specific content within the app. By understanding and implementing deep linking, you can enhance the usability and accessibility of your Flutter applications. In the next module, we will explore networking and APIs, which will further expand your app's capabilities by integrating with external data sources.

Deep Linking

Key Concepts

Setting Up Deep Linking

Configuring URL Schemes

iOS

Android

Handling Deep Links in Flutter

Adding Dependencies

Listening for Deep Links

Testing Deep Links

iOS

Android

Practical Exercise

Task

Solution

Common Mistakes

Conclusion

Flutter Development Course

Module 1: Introduction to Flutter

Module 2: Dart Programming Basics

Module 3: Flutter Widgets

Module 4: State Management

Module 5: Navigation and Routing

Module 6: Networking and APIs

Module 7: Persistence and Storage

Module 8: Advanced Flutter Concepts

Module 9: Testing and Debugging

Module 10: Deployment and Maintenance

Module 11: Flutter for Web and Desktop