How to Create a User Referral System in FlutterFlow

in this video I'm going to show you how to add a referral system to your flutter flow application this is great for tracking user signups if you want to be able to determine who allowed another user to sign up via their sign up link in this case I'm starting with the Court's pre-created flutter flow project but you can obviously do this on your project as well I've gone ahead and navigated to the create account page because this is where I want the referral to actually take place the first thing we'll want to do is add a new page parameter so in the top right we'll click the plus and click add parameter and I'm going to name it user ref short for user reference the type is going to be document reference and the collection is going to be users go ahead and click confirm and we've finished step one now we actually want to store this variable in case a user visits this page and then navigates away from it such as going to the login page and then heading back to create account so to do that we're going to create a new local state variable so I'm going to name it user ref again and I'm going to set it as document reference users and I want that variable to be stored even if a user happens to close out of the browser and come back to sign up in the future so I'm going to turn on persisted and click create I'm going to leave the default value blank because if there's no user reference added there's no referral then I don't want anything to be added to the user's document so if we go back to the create account page now we actually need to set that local state variable so we go to actions click add action and go ahead and search for update local state we'll add a field and that field is going to be the new one we created the user reference and we are going to set the value from a variable and select the parameter we created which is user ref now when somebody clicks on a link or visits this app page from a referral link it will take that parameter from the link and store it as a local variable so that way we can use it throughout the sign up process or in other items now let's actually create where this information is stored for the user so let's head over to Firebase and you see I already have a user's collection we're going to be adding two new variables the first is user ref this is going to be a document reference of users and this is going to store whoever referred the person signing up so if I received a referral link from someone then their information would be stored here after sign up next I also want to store who I sent my referral link to and who has signed up so we're going to create a list here name it user refs and make it a list document reference users so this is going to store everyone that we referred okay so if we go back to create account and we click on create account and go to actions you can see with this template the create account action was already added to the button but here we'll go ahead and set a new field so when the user is signing up we're going to set user ref to the local state which is user ref so if I were to click on a link and go to this page from a referral link the referral link the user would be set as the local state variable and then it would be set as the person that referred me when my account is created but let's go a step further and add the actual referral to the person who referred or sent that link so if I click on open and we click on the plus here we'll add one more action and we will update the document so here we're going to actually select the person that referred the signing up user and we are going to select user refs add to set and at this point since the user created an account we're going to click on authenticated user and select user reference so now after the user has created an account whoever referred them is logged in their user data and the person that sent them that link that did refer them now the person creating an account their data is stored as a referral now let's actually showcase how to create these referral links so I'm going to go ahead and navigate to the profile page and you can see there's a button here already I'm going to adjust some of this information so it looks a bit cleaner and I'll just duplicate this button I'll set this as space between and I will change the text to generate link all right I'm going to adjust the width to make it a bit wider and I'll change the colors so it stands out great so now we have a generate link button I'm going to remove the logout action that was added to it automatically and let's actually generate a link so you'll want to add an action and we will want to do copy to clipboard from here we're going to have to add a couple things together so you're going to want to do combine text now at this point you need to have a link for your application whether that's through deep linking or hosting it on the web so if I went to settings I could set up deep linking or for this example I'll use web publishing so you'll have to publish it either via your domain or a temporary link here so I'll use this temporary link and I'll copy it and we'll go to generate link back to the action combine text so the first set of text is going to be that link you also want to add another set of text and you're going to add a question mark and then you want to add whatever you named that parameter so mine is user ref and then equal to right this is the parameter from the create account page so user ref equals okay now we want to pull the user's user ID so from variable authenticated user user ID so now we have the link you can see what it looks like in full when someone copies this it includes the referral tag here so if someone were to click on this and go to the create account page obviously this link here needs to be for creating an account then it would notice the user reference store that as a local variable and then when they create an account it would log that user on their account in your account that's essentially how you set up a basic referral system in flutter flow again this is great for a ton of different use cases I'm sure there's lots more in the community forums and other ways to adjust it so we'd love to see what you build please tag us on Twitter and other social platforms too

Channel: FlutterFlow

Views: 16,422

Keywords: FlutterFlow, Flutter, Firebase, FlutterFlow Tutorial, User Referral System, Referral System, How to create a referral system, Flutter Referral System, FlutterFlow Set Up, No Code Tools, No Code, No Code App Tutorial, How To Build An App, How to Build a Mobile App, Mobile App with No Code, How To Build a App with No Code, App Building with No Code, No Code Tutorial, Nocode, What is FlutterFlow, Flutter Dart Tutorial, Link Tracking in FlutterFlow, Link Tracking System, Analytics

Id: gKXPFVK0z-M

Length: 7min 11sec (431 seconds)

Published: Fri Jan 06 2023