Deep linking in flutter | dynamic link

Deep linking

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.

 

 

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);
  
  );




 

output :

The screen depicts the usage of flutter deeplinking.

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.

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…

Leave a Reply

Your email address will not be published. Required fields are marked *