> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/flutter-sdk-components/user-assistance/survey-component.md).

# Survey component

## Component Visuals

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

<figure><img src="/files/FaThiEQqBtbJlebzMoQn" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/noXetFTPUcdriDd3wvc5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="/files/XzigyNUuxa4IpuJrtKVq" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 4" %}

<figure><img src="/files/2fIcRN6PEBBEkAlSDWE5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 5" %}

<figure><img src="/files/O5p3945pImUAhnNiCQ7D" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vishal 6" %}

<figure><img src="/files/rYZJBb1vQ63ngVyo7KcX" 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>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.questera.ai/questera-ai-sdks/flutter-sdk-components/user-assistance/survey-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.