# Survey component

## Component Visuals

{% tabs %}
{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FFqK5mRwziZBzwNLC4B5u%2FSurveys%20Temp%201.png?alt=media&#x26;token=34441cea-44fc-4eb5-acab-8395c390c1ed" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F0EcDQoY7eZ7M8n5si0uC%2FSurveys%20Temp%202.png?alt=media&#x26;token=dbf11642-9027-4bdc-af99-a6612cf9b7c5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F9pWmrWrcZui3tJHUvNcL%2FSurveys%20Temp%203.png?alt=media&#x26;token=41177e7d-97bf-4925-a93a-f5d81e899a66" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 4" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FU31ee3uaxOalwP23deYm%2FSurveys%20Temp%204.png?alt=media&#x26;token=46bbeff3-e9de-47d0-8eba-1f8f160da976" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 5" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F8hozRPOgkky22ViRGIt5%2FSurveys%20Temp%205.png?alt=media&#x26;token=41801c95-1370-4004-9bd8-41473bd48963" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vishal 6" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Fuvb67Y7UOativNcavBSm%2FSurveys%20Temp%206.png?alt=media&#x26;token=01e04c9d-c254-48a4-84a8-ce0db58d6315" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

### Installation

To use the get started component , you need to install `questlabs_flutter_sdk` package into your project&#x20;

* 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

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

## Props of Survey Component

<table><thead><tr><th width="170">Prop Name</th><th width="178">Type</th><th width="343">Description</th><th>Required</th></tr></thead><tbody><tr><td>questProvider</td><td>QuestProvider</td><td>Provides necessary configuration such as API key, entity ID, and optional theme settings</td><td>Yes</td></tr><tr><td>apiKey</td><td>String</td><td>API key to authenticate requests.</td><td>Yes</td></tr><tr><td>entityId</td><td>String</td><td>Entity ID associated with the quest.</td><td>Yes</td></tr><tr><td>themeConfig</td><td>QuestThemeConfig</td><td>Customizes theme settings like background color, font style, border color, button color, etc.</td><td>No</td></tr><tr><td>primaryColor</td><td>Color</td><td>Sets the primary color of the component .</td><td>no</td></tr><tr><td>secondaryColor</td><td>Color</td><td>Sets the secondary color of the component .</td><td>no</td></tr><tr><td>buttonColor</td><td>Color</td><td>Defines the color of buttons within the component .</td><td>no</td></tr><tr><td>backgroundColor</td><td>Color</td><td>Specifies the background color of the component .</td><td>no</td></tr><tr><td>borderColor</td><td>Color</td><td>Defines the color of the component's border.</td><td>no</td></tr><tr><td>fontStyle</td><td>String</td><td>Sets the font style for text within the component (e.g., <code>"poppins"</code>)</td><td>no</td></tr><tr><td>surveyProps</td><td>SurveyProps</td><td>Contains user ID, campaign ID, token, and display options for the "Tutorial Component" </td><td>Yes</td></tr><tr><td>userId</td><td>String</td><td>Unique user identifier.</td><td>Yes</td></tr><tr><td>token</td><td>String</td><td>Token for authenticating the user session.</td><td>Yes</td></tr><tr><td>campaignId</td><td>String</td><td>Unique campaign identifier.</td><td>Yes</td></tr><tr><td>showFooter</td><td>bool</td><td>Whether or not to display the footer in the "Survey" component.</td><td>no</td></tr><tr><td>uiHeader</td><td>List&#x3C;UiHeader></td><td>change question section header and description </td><td>no</td></tr><tr><td>heading</td><td>String</td><td>Sets the text for the heading area of the component</td><td>no</td></tr><tr><td>subHeading</td><td>String</td><td>Provides text for the description area of the component</td><td>no</td></tr><tr><td>questionSection</td><td>List&#x3C;List&#x3C;int>></td><td>change your question order and question section</td><td>no</td></tr></tbody></table>

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

```dart

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

### **Basic Usage:**

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

```dart
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 :&#x20;

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

{% hint style="info" %}
Ensure you provide your entity ID, API key, token, user ID, and campaign ID
{% endhint %}

```dart
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:  SurveyComponent(
          questProvider: QuestProvider(
              apiKey: "k-6fe7e7dc-ac8f-44a1-8bbf-a1754ddf88be",
              entityId: "e-48bebfc3-4e36-4138-8c18-94e45a482003",
              themeConfig: QuestThemeConfig(
                // secondaryColor: Colors.red,
                // primaryColor: Colors.blue,
                // backgroundColor: Colors.green,
                // buttonColor: Colors.yellow,
                // fontStyle: "dancing script",
                // borderColor: Colors.red
              )
          ),
          surveyProps: SurveyProps(
              token: Token.token,
              userId: "u-476d444c-5adb-41e2-9d49-6866150ac30a",
              campaignId: "c-6b6c0ca1-e75f-43ad-a9dd-786858c6bf31",
              questionSection: [[1, 2], [3,4, 5],],
              uiHeader: [
                UiHeader(
                    heading: "notheee",
                    subHeading: "none 1"
                ),
                UiHeader(
                    heading: "screen 2",
                    subHeading: "none 2"
                ),
              ],
              showFooter: false,
              heading: "",
              subHeading: ""
          ),
        ),
      ),
    );
  }
}



```

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

{% embed url="<https://www.loom.com/share/e71fb4f820094a949dbf0ba5ea9a0135?sid=06e12e12-1ba7-4a4f-9dcb-c47ae0ab65bf>" %}