Referral Component
The Referral components are reusable flutter component designed to facilitate user referrals and rewards. It allows users to earn rewards by sharing a referral code with friends
Last updated
The Referral components are reusable flutter component designed to facilitate user referrals and rewards. It allows users to earn rewards by sharing a referral code with friends
Last updated
To unlock early access to the component Get Access
To use the Referral component , you need to install questlabs_flutter_sdk
package into your project
First, navigate to the root directory of your Flutter project. Open the pubspec.yaml
file using your preferred code editor.
Under the dependencies
section in your pubspec.yaml
file, add the following line to include the questlabs_flutter_sdk
package
After saving your changes, open your terminal or command prompt and run the following command to fetch the new dependency
questProvider
QuestProvider
Provides necessary configuration such as API key, entity ID, and optional theme settings
Yes
apiKey
String
API key to authenticate requests.
Yes
entityId
String
Entity ID associated with the quest.
Yes
themeConfig
QuestThemeConfig
Customizes theme settings like background color, font style, border color, button color, etc.
No
primaryColor
Color
Sets the primary color of the component .
no
secondaryColor
Color
Sets the secondary color of the component .
no
buttonColor
Color
Defines the color of buttons within the component .
no
backgroundColor
Color
Specifies the background color of the component .
no
borderColor
Color
Defines the color of the component's border.
no
fontStyle
String
Sets the font style for text within the component (e.g., "poppins"
)
no
shareWithComponentProps
ShareWithComponentProps
Contains user details,campaign ID, token, and display options for the "Referral Component"
Yes
userId
String
Unique user identifier.
Yes
token
String
Token for authenticating the user session.
Yes
campaignId
String
Unique campaign identifier.
Yes
showFooter
bool
Whether or not to display the footer in the "referral" component.
no
heading
String
Heading for the referral component.
no
description
String
Description for the referral component.
no
gradientBackgroundColor
Color
Indicates whether to use a gradient background.
no
primaryHeading
String
Primary heading for the gradient background.
no
primaryDescription
String
Primary description for the gradient background.
no
referralLink
String
Referral link.
no
shareButtonText
String
Text for the share button.
no
You can customize the UI with the type of QuestThemeConfig would be
In your main()
function, ensure you initialize the app and dependencies as follows:
Add the following BlocProvider
setup to your providers
list to initialize the ShareWithComponentCubit
for state management:
Ensure you provide your entity ID, API key, token, user ID, and quest ID
Watch the YouTube video below for a step-by-step guide on testing the Referral component in your Flutter project.