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
To unlock early access to the component Get Access
Installation
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 yourpubspec.yaml
file, add the following line to include thequestlabs_flutter_sdk
packageAfter saving your changes, open your terminal or command prompt and run the following command to fetch the new dependency
Props of Referral Component
Prop Name | Type | Description | Required |
---|---|---|---|
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., | 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
Basic Usage:
In your
main()
function, ensure you initialize the app and dependencies as follows:
Add the following
BlocProvider
setup to yourproviders
list to initialize theShareWithComponentCubit
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.
Last updated