Deep linking in flutter | dynamic link

 

Deep linkingĀ  :

Deep linking concept in flutter app is explained in this part of the tutorial. When you try to open a URL i.e., the dynamic link you can open the app and navigate to that screen.

Apps like amazon, flipkart can use these deep links to exactly move the user to the product page or the offers section based on the push notifications.

Deep linking also plays a key role in new app installations, where users are offered welcome bonus, referral bonus and so on.

In this tutorial we will make use of firebase for creating dynamic links follow video tutorial provided to understand how we can perform deep linking in flutter app.

 

Deep linking Video Tutorial :

Go through the below tutorial for more detailed updates.

 

pubspec.yaml :

Add get and firebase dynamic links to the pubspec

dependencies:
  flutter:
    sdk: flutter
  get:
  firebase_dynamic_links:

profile.dart :

Create a profile screen so that we can move to it after the Deep linking url is opened up.

import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  const Profile({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Profile Screen")),
        body: Center(
          child: Container(
            child: Text('Profile Screen'),
          ),
        ),
      )
    );
  }
}

 

main.dart :

Initialize GetX to make use of navigation in your app. And also provide the routes so that we can navigate to that screen on link open.

GetMaterialApp(
  routes: {
    '/profile' : (BuildContext context) => Profile()
  },

 

In init block we need to provide dynamic block link method so that it gets initialized as the app loads and can redirect to the profile screen.

 

Add a firebase dynamic links instance using which we can fetch the data from dynamic links and process further.

We have both success and failure blocks and can provide the code depending upon the situations.

 

FirebaseDynamicLinks.instance.onLink(
  onSuccess: (PendingDynamicLinkData? dynamicLink) async {},
  onError: (OnLinkErrorException e) async{}
);

 

Now let’s try to make use of the dynamic link and navigate to the next screen using GetX navigation.

if(deeplink!=null) {
  print("deeplink data " + deeplink.queryParameters.values.first);
  Get.toNamed('/profile');
}

 

On error we are printing error message onto the console.

onError: (OnLinkErrorException e) async{
    print(e.message);
}

 

Providing the full code for deep linking integration.

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';
import 'package:flutter/material.dart';
import 'package:flutter_deep_linking/profile.dart';
import 'package:get/get.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    initDynamicLinks();
  }

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      routes: {
        '/profile' : (BuildContext context) => Profile()
      },
      home: Scaffold(
        appBar: AppBar(title: Text("DeepLink"),),
        body: Center(
          child: Container(
            child: Text('Deeplinking Page'),
          ),
        ),
      ),
    );
  }
}

void initDynamicLinks() async{
  FirebaseDynamicLinks.instance.onLink(
    onSuccess: (PendingDynamicLinkData? dynamicLink) async{
      final Uri? deeplink = dynamicLink?.link;

      if(deeplink!=null){
        print("deeplink data "+deeplink.queryParameters.values.first);

        Get.toNamed('/profile');

      }
    },
    onError: (OnLinkErrorException e) async{
      print(e.message);
  }
  );
}


 

Deep linking output :

The screen depicts the tutorial of flutter deeplinking tap on the image.

Deep linking

 

If you have any query’s in this tutorial on Deep linking do let us know in the comment section below.If you like this tutorial do like and share us for more interesting tutorials.

Show Buttons
Hide Buttons
Read previous post:
Flutter image upload to rest API | image upload

  Flutter Image Upload : In this blog on Flutter image upload we will be looking through the topic of...

Close