Daily Streak Component

The Daily Streak component for Flutter tracks and displays daily streaks for any metric, offering visual progress indicators and customizable options to fit your app’s needs

Components Visuals

Overview

Visual 1

Viusal 2

To unlock early access to the component Get Access

Installation

To use the get started 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 Daily Streak 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
streakProps	StreakProps	Contains user ID, quest ID, token, and display options for the "Daily Streak Component"	Yes
userId	String	Unique user identifier.	Yes
token	String	Token for authenticating the user session.	Yes
questId	String	Unique quest identifier.	Yes
filledStreakImg	String	set completed Steak image(it must be image url)	no
pendingStreakImg	String	set pending Streak image(it must be image url)	no
stepDetails	List<stepDetails>	you can modify your descreption , title and range	no
description	String	descreption for indivisual streak component	no
title	String	title for indivisual streak component	np
range	int	range for indivisual streak component	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 quest 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<GamificationQuizCubit>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        home:  DailyStreakComponent(
          questProvider: QuestProvider(
              apiKey: "apiKey",
              entityId: "entityId",
              themeConfig: QuestThemeConfig(
                // secondaryColor: Colors.red,
                // primaryColor: Colors.green,
                // buttonColor: Colors.yellow,
                // backgroundColor: Colors.yellow,
                // fontStyle: "poppins",
                // borderColor: Colors.black
              )
          ),
          streakProps: StreakProps(
            userId: "userId",
            token: "token",
            questId: "questId",
            // filledStreakImg: "https://plus.unsplash.com/premium_photo-1683865776032-07bf70b0add1?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            // stepDetails: [
            //   StepDetails(
            //     description: 'This is the longest streak you’ve ever had',
            //     title: 'Confident reader',
            //     range: 3,
            //   ),
            //   StepDetails(
            //     description: 'This is the longest streak you’ve ever had',
            //     title: 'Responsible reader',
            //     range: 2,
            //   ),
            //   StepDetails(
            //     description: 'This is the longest streak you’ve ever had',
            //     title: 'Serious learner',
            //     range: 5,
            //   ),
            //   StepDetails(
            //     description: 'This is the longest streak you’ve ever had',
            //     title: 'Absolute reader',
            //     range: 3,
            //   ),
            // ],
          ),
        ),
      ),
    );
  }
}

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