How to Integrate a Referral System in Flutter with Firebase Dynamic Linking

Referral programs can help drive growth and increase user acquisition and retention for your app. In this article, I’ll show you how to integrate a referral system in your Flutter app using Firebase Dynamic Linking.

Step 1: Set up Firebase

Before we get started, make sure you have a Flutter project set up with Firebase integration. If you haven’t done this already, you can follow the instructions in the Firebase documentation to set up a new project and add Firebase to your Flutter app.

You can also follow this link to reach there:

Add Firebase to your Flutter app

Step 2: Create a Dynamic Link in the Firebase Console

Once you have Firebase set up, the first step is to create a dynamic link in the Firebase console. Dynamic links are links that can direct users to specific content in your app and track when a user clicks on a link and attribute the referral to the user who shared it.

1. Go to the Firebase console and navigate to the Dynamic Links section. You can find the section on the drawer placed on the left side with the name Engage. After that, you have to Get Started where you have a window like this.

Get started with dynamic links

Now you will see a pop-up like this;

Add URL prefix

Here you can add any domain name that you want. In my case, I gave it

mymediumarticle.page.link

2. Now after finishing click on the “New Dynamic Link” button to create a new dynamic link. After clicking you have set up your short URL Link.

Set up your short URL link

After that, you have set up your dynamic link for example;

Set up your Dynamic Link

After that, you have to tell the behavior when the user clicks on your link. Like if you want to open that in browser or android app. By selecting android app it will open the play store if app is not installed other wise it direct you to app and open the installed app.

After that your dynamic link is ready to use.

You might be thinking that this way we are creating link through firebase console but how can we create our link through code?

Step 3: Generate a Dynamic Link through Flutter code

Now that you have configured your dynamic link in the Firebase Console, you can generate a dynamic link through Flutter code. Here’s how:

1. Add the Firebase Dynamic Links package to your Flutter project by adding the following line to your pubspec.yaml file:

dependencies:
  firebase_dynamic_links: ^1.0.0

Then, run the following command to install the plugin:

flutter packages get

2. Here is an example Flutter code snippet that generates a Dynamic Link:

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

Future<Uri> generateDynamicLink() async {
  final DynamicLinkParameters parameters = DynamicLinkParameters(
    uriPrefix: 'https://your-domain.page.link',
    link: Uri.parse('https://your-website.com/path'),
    androidParameters: AndroidParameters(
      packageName: 'com.your.package.name',
    ),
    iosParameters: IosParameters(
      bundleId: 'com.your.package.name',
    ),
  );

  final ShortDynamicLink shortLink = await parameters.buildShortLink();
  return shortLink.shortUrl;
}

Replace Uri Prefix with your url(domain name) like have created in Step : 02 as mymediumarticle.page.link. You can see scroll up to see where we did that and at link you can give your website link or any other if you don’t have that.

Now you just need to replace the package names of your flutter app.

Android

For android you can find it in AndroidManifest.xml file on very top of the file. See this example code here;

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.blocship.myapp.test_app">

here io.blocship.myapp.test_app is your package name

iOS

In iOS the package name is the bundle identifier in Info.plist:

<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

which is found in Runner.xcodeproj/project.pbxproj:

PRODUCT_BUNDLE_IDENTIFIER = com.example.appname;

here com.example.appname is your bundle Id.

You might be thinking that how the app will receive that and how app will know there is incoming link?

To receive referral in your app you have to write some code in your main.dart file where we can guide our app that what to do when we receive and referral link and you can also go to the specific screen based on your link I will elaborate it.

Step 4: Configuring a Dynamic Link

Configure the Firebase plugin in your app’s main.dart file, by adding the following code:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseDynamicLinks.instance.onLink(
    onSuccess: (PendingDynamicLinkData? dynamicLink) async {
      final Uri? deepLink = dynamicLink?.link;
      // Handle the deep link here
    },
    onError: (OnLinkErrorException e) async {
      // Handle the link error here
    }
  );
  runApp(MyApp());
}

This code initializes the Firebase plugin, and sets up a listener for incoming dynamic links. When a link is received, the onSuccess callback is called, and you can handle the deep link accordingly.

You can do what ever your want like if you want to go some screen you can write code Navigator.push like that.

By these steps you can create dynamic link and share to your friends and as soon as they click on that if app does not installed so it will it to play store or app store and if installed so the app will opened.

Wait Wait Wait ! 🤨

But it is not sound like real life example means we must have some sort of system where every user will have there unique ID and when some one clicks on it so they will get points when the he/she sign up and all stuffs. So, how it can be done let’s see how I implemented it for my client 😀

Designing & Developing Referral System:

Step 1: Creating Design

I am sharing with you the design where there is unique referral Id for all user so that when we generate our dynamic link so that we will pass it along with it. This will identify at other user end that which user is referring to give him points as soon as other user sign up.

Now you can see the send invitation button where I open bottom sheet to share the link to any other apps like WhatsApp.

Step 2: Creating Link With Referral Code

Let me write some code generate link with user referral code so that it becomes complete link.

Uri referralLink(String code) => 
Uri.parse('https://www.blocship.io').replace(queryParameters: {'referral_code': code});

This is the getter which will return a URL containing referral code passed to it. Now, this will be the link containing user info who referred in a form of referral code rest of working will be same which we have discussed above.

Step 3: Handling Link For Other End

Now we have to fetch the detail of the friend who referred from query parameters. Let’s see how can we achieve that.

Future<void> handleDeepLinking() async {
  final PendingDynamicLinkData? initialLink = await FirebaseDynamicLinks.instance.getInitialLink();
  if (initialLink != null) {
    final Uri deepLink = initialLink.link;
    // Example of using the dynamic link to push the user to a different screen
    //Navigator.pushNamed(context, deepLink.path);
  }
  FirebaseDynamicLinks.instance.onLink.listen(
    (pendingDynamicLinkData) async {
      if (pendingDynamicLinkData != null) {
        final Uri deepLink = pendingDynamicLinkData.link;
        Map<String, String> queryParams = deepLink.queryParameters;
        await serviceLocator<LocalStorage>().saveReferralCode(queryParams['referral_code'] ?? '');
      }
    },
  );
  runApp(AppView());
}

Now what we are doing here first making our query parameters Map from deep link URI and then just passing the key to get their code. Make sure you give right key name which you set while generating link in Step 2.

After that I am just saving that into local database to use anywhere inside the app. You can skip that as you can right your own logic. In this way the app will identify through referral code that who referred.

I think you still have confusion that this all are fine but how will you give points to user how our backend come to know we have to increments some points to this user? 🤔

Step 4: How User Will Get Points

This is the final step where we are writing logic to increment some points in user account. In my case our backend developer created a body parameter as referral code in register API so when ever user try to register through the link the code will pass here so that our backend comes to know the user which created now is referred by some one.

Based on the data some points will be added to that user account. Pretty simple! 😃

This the most simple and best way to make referral system for your flutter app. Hope you understand it very well !

If you like the article so don’t forget to clap and share your thoughts with me. I will be waiting for that Thank You!

You can connect with me on LinkedIn:

https://www.linkedin.com/in/affan-minhas-36858a213/