flutter_survey 0.1.3

A package that handles the creation and state of a dynamic questionnaire/data collection survey with conditional questions.

Flutter Survey

Inspired by Google Forms

A simple yet powerful package that handles the creation of a dynamic questionnaire/research survey with conditional questions.
Have you ever wanted to implement a form/questionnaire/survey like the ones you see on Google forms?
Have you ever wanted to implement conditional questions that show or hide the questions that follow, based on the user's input?
This package helps you build data collection forms hassle-free.

📋 Features

✔️ Eliminates boilerplate code for surveys.
✔️ Implement Conditional/Single Choice/Multiple Choice questions.
✔️ Intuitively construct your own questions with infinite nesting.
✔️ Customize it by creating your own form widgets from scratch using the builder method.
✔️ Add your own properties for your custom widgets.
✔️ Supports validation using the Form widget
✔️ Implicitly supports Dark theme.

🔮 Next Update

✔️ Supports Internationalization.
✔️ Supports custom regex validation
✔️ Supports various formats of input (Date Picker, File Upload, Slider etc)
✔️ Track progress

⚙️ Installation

This project requires the latest version of Dart. You can download the latest and greatest here.

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
    flutter_survey: '^0.1.3'

2. Install it

You can install packages from the command line:

$ pub get
..

Alternatively, your editor might support pub. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_survey/survey.dart';

📖 Usage

First, you must initialize the question structure where you specify the type of questions and their possible answers, if any. You can also nest questions to form conditional questions. You can even mark them as mandatory. This can be either in json format fetched from the server or can be constructed using the [Question] model provided as part of this package. The structure is intuitive and determines the flow of the form.

Types of questions

The Questions are classified based on the kind of input they take.

Text Input Question

As the name suggests here the answer is not limited to any specific choice. The answer to this question can be typed in by the user, single line or multiline. Setting the answerChoice variable to null or simply leaving it altogether gives you this.

Question(
 question: "What is your name?",
)

Single Choice Question

Here, Radio Buttons are used as input. You define the possible answer choices as a Map, with the keys being the answer choices. Note that the value of the corresponding keys happen to be null. This is because they don't have an associated list of questions that follow it.

 Question(
   question: 'Do you like drinking coffee?',
   answerChoices: {
     "Yes": null,
     "No": null,
   },
 ),

Multiple Choice Question

Here, Checkboxes are used as input. Just like the Single Choice Questions, You define the possible answer choices as a Map with the keys being the answer choices. Note that even here the value of the corresponding keys happen to be null for the same reason as Single Choice Questions. The difference here is that you set isSingleChoice to false.

Question(
  isSingleChoice: false,
  question: 'What are the brands that you have tried?',
  answerChoices: {
    "Nestle": null,
    "Starbucks": null,
    "Coffee Day": null,
  },
),

Conditional/Nested Questions

This is where you define questions that follow based on the answer of the question prior to it. The values of the keys defined in the answerChoices field determines the flow. For example here, if the user were to choose "Yes" to "Do you like drinking coffee", the user would be confronted with another question "What are the brands you've tried?" followed by more nesting.

 Question(
   isMandatory: true,
   question: 'Do you like drinking coffee?',
   answerChoices: {
     "Yes": [
       Question(
           singleChoice: false,
           question: "What are the brands that you've tried?",
           answerChoices: {
             "Nestle": null,
             "Starbucks": null,
             "Coffee Day": [
               Question(
                 question: "Did you enjoy visiting Coffee Day?",
                 isMandatory: true,
                 answerChoices: {
                   "Yes": [
                     Question(
                       question: "Please tell us why you like it",
                     )
                   ],
                   "No": [
                     Question(
                       question: "Please tell us what went wrong",
                     )
                   ],
                 },
               )
             ],
           })
     ],
     "No": [
       Question(
         question: "Do you like drinking Tea then?",
         answerChoices: {
           "Yes": [
             Question(
                 question: "What are the brands that you've tried?",
                 answerChoices: {
                   "Nestle": null,
                   "ChaiBucks": null,
                   "Indian Premium Tea": [
                     Question(
                       question: "Did you enjoy visiting IPT?",
                       answerChoices: {
                         "Yes": [
                           Question(
                             question: "Please tell us why you like it",
                           )
                         ],
                         "No": [
                           Question(
                             question: "Please tell us what went wrong",
                           )
                         ],
                       },
                     )
                   ],
                 })
           ],
           "No": null,
         },
       )
     ],
   },
 ),

A full question structure represented as a List:

 List<Question> _initialData = [
  Question(
    isMandatory: true,
    question: 'Do you like drinking coffee?',
    answerChoices: {
      "Yes": [
        Question(
            singleChoice: false,
            question: "What are the brands that you've tried?",
            answerChoices: {
              "Nestle": null,
              "Starbucks": null,
              "Coffee Day": [
                Question(
                  question: "Did you enjoy visiting Coffee Day?",
                  isMandatory: true,
                  answerChoices: {
                    "Yes": [
                      Question(
                        question: "Please tell us why you like it",
                      )
                    ],
                    "No": [
                      Question(
                        question: "Please tell us what went wrong",
                      )
                    ],
                  },
                )
              ],
            })
      ],
      "No": [
        Question(
          question: "Do you like drinking Tea then?",
          answerChoices: {
            "Yes": [
              Question(
                  question: "What are the brands that you've tried?",
                  answerChoices: {
                    "Nestle": null,
                    "ChaiBucks": null,
                    "Indian Premium Tea": [
                      Question(
                        question: "Did you enjoy visiting IPT?",
                        answerChoices: {
                          "Yes": [
                            Question(
                              question: "Please tell us why you like it",
                            )
                          ],
                          "No": [
                            Question(
                              question: "Please tell us what went wrong",
                            )
                          ],
                        },
                      )
                    ],
                  })
            ],
            "No": null,
          },
        )
      ],
    },
  ),
  Question(
      question: "What age group do you fall in?",
      isMandatory: true,
      answerChoices: const {
        "18-20": null,
        "20-30": null,
        "Greater than 30": null,
      })
];

Pass the list of questions to the ConditionalQuestions Widget.

This is the main widget that handles the form. The list of questions constructed above are passed to the initialData parameter. The onNext callback function is an optional parameter that is called with the current state of the survey, which is a List of QuestionResult objects.

         Survey(
          initialData: _surveyData,
          onNext:(questionResults){
              print(questionResults);
              //store the result
          },
        )

🤝 Contributing

Help make this package more useful and serve the needs of the community by reporting bugs, submitting feedback and/or opening a PR.

ℹ️ About me

Visit my LinkedIn at https://www.linkedin.com/in/michel98