Onboarding Quiz - Single page Component

The Onboarding singlepage is a versatile Flutter component designed for creating interactive onboarding experiences. It allows you to guide users through a series of screens, collect their responses.

Component Visuals

Installation

To unlock early access to the component Get Access

Installation

To use the Onboarding Quiz 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 Onboarding Quiz 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., "poppins")

no

onBoardingProps2

OnBoardingProps2

Contains user ID, quest ID, token, and display options for the "onboarding quiz Component"

Yes

userId

String

Unique user identifier.

Yes

token

String

Token for authenticating the user session.

Yes

campaignId

String

Unique campaign identifier.

Yes

uiHeader

List<UiHeader>

change question section header and description

no

heading

String

Sets the text for the heading area of the component

no

subHeading

String

Provides text for the description area of the component

no

design

List<List<int>>

change your question order and question section

no

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 ComponentStateCubit for state management:

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

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

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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<ComponentStateCubit>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        home:   OnBoardingQuizTemplate2(
          questProvider: QuestProvider(
              apiKey: "apiKey",
              entityId: "entityId",
              themeConfig: QuestThemeConfig(
                // secondaryColor: Colors.red,
                // primaryColor: Colors.blue,
                // buttonColor: Colors.yellow,
                // fontStyle: "",
                // borderColor: Colors.red
              )
          ),
          onBoardingProps: OnBoardingProps2(
            token: "token",
            userId: "userId",
            campaignId: "campaignId",
            //   design: [
            //   [1, 2, 3, 1],
            //   [5, 6, 7],
            //  ],
            // uiHeader: [
            //   UiHeader(
            //       heading: "notheee",
            //       subHeading: "none 1"
            //   ),
            //   UiHeader(
            //       heading: "screen 2",
            //       subHeading: "none 2"
            //   ),
            // ],

          ),
        )
      ),
    );
  }
}

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

PreviousOnboarding Quiz - Multi page ComponentNextGet Started Component

Last updated