How To Build a Referral System for Your Flutter Web App

You already know that Google will shut down Dynamic Links, one of the most popular Firebase features that allowed building a referral system for your service or app.

I was looking for a replacement solution for Firebase for my web application written in Flutter but failed. Maybe I’m just not good at searching on Google (Googler — a person who uses Google a lot). All similar services seemed too complicated or just didn’t fit me.

So, I decided to build my own referral system and solve a few problems along the way to success. If you are interested in learning how to build your referral system, enjoy reading.

The referral link idea

The first thing you will have to handle when working with a web app is the domain name. Let me explain.

The goal I was aiming for is to make the process of sharing referral link between users as simple as just copy and paste one. I want to be able to send to someone a link like this:

https://somedomain.com/referral?user=some-unique-user-id.

This link has to bring the user to the registration form on my service’s web app. After registration, there has to be a record in the database that this new user was brought to the service within my referral link, for example. And later, I will have some benefits for this, but this is not the point of the article.

So, the domain name. The problem is that it’s not changing while you’re routing in the web app (see the pics below).

No changes in the address bar. But, do we actually need these changes? The answer is — NO!

There is a much better way — we can read the value of the address bar. To do this, you have to write a few lines of code — the piece of production code for the service that we are currently developing.

String? referralUserId;

@override
void initState() {
  // Parse the current URL - you will have exactly what is in
  // the address bar.
  Uri uri = Uri.parse(html.window.location.href);

  // Extract query parameters that we put in link earlier
  referralUserId = uri.queryParameters['user'];

  // Use the extracted parameters in your Flutter app
  log('User ref ID: $referralUserId');

  super.initState();
}

@override
  Widget build(
    BuildContext context,
  ) =>
      Observer(
        // If there was a referal link, take me to Sign Up page and
        // pass referral user ID to it.
        builder: (_) => referralUserId == null
            ? const SignInPage()

              /// The `referralUserId` is an optional value.
            : SignUpPage(
                referralUserId: referralUserId,
              ),
      );

So my own referral link is as follows (try it!):

https://langualog.com/referral?user=60a60ef0-cdee-40b5-afa2-c5d8cc004e73

And the log will write to console:

User ref ID: 60a60ef0-cdee-40b5-afa2-c5d8cc004e73

What happened just now is that we followed the referral link, detected and took the user’s ID from the link, and passed it to the Sign Up Page to store it later in this new user’s profile.

The server side

Of course you have to make changes to the server that manages your domain and web app accordingly, otherwise you will get a 404 response. My server runs on Nginx and the configuration has the following section to pass the referral path.

# Handle requests to /referral
location /referral {
  try_files $uri $uri/ /index.html;
}

Now everything is working. And when the user signs up for the service, the unique ID will be stored in the database like this:

Also, a new user will get their own referral code that will be placed in the share link.

So now you have your own referral system in a Flutter web app, and can share links to your service easily to manage later how much new users bring you the old users. Thanks for reading.

By the way, this article’s text was checked for mistakes with Langualog — the service that allows you to compose, translate, improve with AI your text and study English in one App.