How To Build a Referral System for Your Flutter Web App

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

Deprecated: Firebase Dynamic Links is deprecated and should not be adopted in projects that don’t already use it. The service will shut down on August 25, 2025. See the Dynamic Links Deprecation FAQ for more information. Source.

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 referral system and solve a few problems along the way. 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.

My goal was to make the process of sharing referral links between users as simple as copying and pasting.

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 would enjoy some added benefits as a result, but this is not the point of the article.

Back to the domain name. The problem is that it does not change while you route 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,
          ),
  );

And so, my referral link is as follows (try it!):

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

The log will then write to the 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 fine. 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 referral code that will be placed in the share link.

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