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.
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.