App Linking in Flutter for Beginners

App Linking:

Suppose we have flutter application in which we are going to implement referral functionality. It mean whenever anyone visit to provided link "https://example.com/register/referral='ABS683H'" then automatic open the installed app which is associated to this link. more

For Android Application

Step 1:

Create a flutter application using this command:   flutter create applinktest  

Step 2:

Go to: android/app/src/main/AndroidMenifest.xml

<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>

<!-- applinking  -->

<meta-data android:name="flutter_deeplinking_enabled"

android:value="true" />

<intent-filter android:autoVerify="true">

<action android:name="android.intent.action.VIEW" />

<category android:name="android.intent.category.DEFAULT" />

<category android:name="android.intent.category.BROWSABLE" />

<!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->

 <data

  android:scheme="https"

  android:host="your_domain.com"

  android:pathPrefix="/register/" />

 </intent-filter>

Step 3:

Go to github create new repo with the name - ".well-known" and under this create a file with name assetLink.json and paste this code:



[{"relation": ["delegate_permission/common.handle_all_urls"],"target": {"namespace": "android_app","package_name": "com.example.applinktest","sha256_cert_fingerprints": ["..."]}}]

visit this link to get above data if successfully deploy: https://your_github_username.github.io/.well-known/assetlinks.json

Step 4: 

Time to generate SHA256, Go to applinktest/android of your project directory terminal and run this command: ./gradlew signingReport where you can find SHA256.

Step 5: 

Go to this link https://github.com/your_github_username/.well-known/settings/pages:

page where you can deploy your page

Step 6: 

Create main.dart file like this

import 'package:applinktest/pages/color_app_home_page.dart';

import 'package:applinktest/pages/color_detail_page.dart';

import 'package:applinktest/pages/show_referral.dart';

import 'package:flutter/material.dart';

import 'package:get/get.dart';

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

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

  @override

  Widget build(BuildContext context) {

    return GetMaterialApp(

      debugShowCheckedModeBanner: false,

      title: 'Deep Linking Flutter',

      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(

        seedColor: Colors.deepPurple

        ),

        // Ensure to set useMaterial3 to true if you're using

        // Material3.

        // useMaterial3: true,

      ),

      defaultTransition: Transition.fade,

      getPages: [

        GetPage(name: '/',

         page: () => const ColorAppHomePage()),

        GetPage(name: '/red',

       page: () => const ColorDetailPage(color: Colors.red)),

        GetPage(name: '/blue',

        page: () => const ColorDetailPage(color: Colors.blue)),

        GetPage(name: '/register',

         page: () => const Showreferral()),

      ],

      initialRoute: '/',

    );

  }

}

Step 7: 

Create show_referral.dart page, you can remove ColorDetailPage().

import 'package:flutter/material.dart';

import 'package:uni_links/uni_links.dart';

class Showreferral extends StatefulWidget {

  const Showreferral({super.key});

  @override

  State<Showreferral> createState() => _ShowreferralState();

}

class _ShowreferralState extends State<Showreferral> {

  String? _referralCode;

  @override

  void initState() {

    super.initState();

    _initDeepLinkListener();

  }

  Future<void> _initDeepLinkListener() async {

    // Initialize the deep link stream

    final initialLink = await getInitialUri();

    _handleDeepLink(initialLink);

    print("initial link: $initialLink");

    // Listen for deep link changes

    uriLinkStream.listen((Uri? uri) {

      _handleDeepLink(uri);

    }, onError: (err) {

      print('Error listening to URI links: $err');

    });

  }

  void _handleDeepLink(Uri? uri) {

        if (uri != null) {

      // Extract the referral code from the deep link

      setState(() {

        _referralCode = uri.queryParameters['referral'];

      });

    }

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Text("referral= $_referralCode"),

      ),

    );

  }

}

Make sure to install these dependancies: 

dependencies:

  get: ^4.6.6

  uni_links: ^0.5.1

Now you can build and install your app in physical device and visit this link :

 https://your_github_username.github.io/register/?referral=Abdh647h (paste it in anywhere in mobile and click on it)

hdhhdh

kkk