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

Components Visuals

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 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

dependencies:
  questlabs_flutter_sdk:
    git:
      url: "Replace with your github URL"
      ref: master  
  flutter_bloc: ^8.1.6

Props of Referral Component

You can customize the UI with the type of QuestThemeConfig would be


          themeConfig: QuestThemeConfig(
              secondaryColor: Colors.red,
              primaryColor: Colors.blue,
              buttonColor: Colors.yellow,
              backgroundColor: Colors.yellow,
              fontStyle: "libre baskerville",
              borderColor: Colors.red
          )

Basic Usage:

  • In your main() function, ensure you initialize the app and dependencies as follows:

void main() {
  runApp(const MyApp());
  getItInit();
  getIt<SharedPref>().init();
}
  • Add the following BlocProvider setup to your providers list to initialize the ShareWithComponentCubit for state management:

providers: [
  BlocProvider(
            create: (context) => getIt<ShareWithComponentCubit>(),
          ),
],

Ensure you provide your entity ID, API key, token, user ID, and quest ID

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:quest_interview/token.dart';
import 'package:questlabs_flutter_sdk/questlabs_flutter_sdk.dart';

void main() {
  runApp(const MyApp());
  getItInit();
  getIt<SharedPref>().init();
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => getIt<ShareWithComponentCubit>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        home:   ShareWithComponent(
          questProvider: QuestProvider(
              apiKey: "apiKey",
              entityId: "entityId",
              // themeConfig: QuestThemeConfig(
              //     secondaryColor: Colors.green,
              //     primaryColor: Colors.blue,
              //     backgroundColor: Colors.white,
              //     buttonColor: Colors.yellow,
              //     fontStyle: "dancing script",
              //     borderColor: Colors.red
              // )
          ),
          shareWithComponentProps: ShareWithComponentProps(
              userId: "userId",
              token: "token",
              campaignId: "campaignId",
              // heading: "hhhhh",
              // showFooter: true,
              // description: "nothing is scary",
              // gradientBackgroundColor: Colors.red,
              // primaryDescription: "testing",
              // primaryHeading: "jjjjjj",
              // referralLink: "linkdin",
              // shareButtonText: "share this",
              // showRefferalLogo: false
          ),
        )
      ),
    );
  }
}


Watch the YouTube video below for a step-by-step guide on testing the Referral component in your Flutter project.

Last updated