Inline Feedback Component

A user-friendly tool for collecting feedback, featuring email, message, name, and star ratings for effective user input.

Components Visuals

To unlock early access to the component Get Access

Installation

To use the inline feedback 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 inline Feedback 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 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<ComponentStateCubit>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        home:  InlineFeedback(
          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
              )
          ),
          inlineFeedbackProps: InlineFeedbackProps(
            token: "token" ,
            userId: "userId",
            questId: "questId",
            descriptionText: "hello",
            headingText: "nothins",
          ),
        )
      ),
    );
  }
}


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

Last updated