How to Create a Dynamic Questionnaire System in FlutterFlow

Create a questionnaires collection with fields: title (String), description (String), isActive (Boolean). Under each questionnaire, create a questions subcollection. Each question document contains: questionText (String), inputType (String: text, number, email, phone, date, singleSelect, multiSelect), options (String Array for select types), isRequired (Boolean), placeholder (String), validationRegex (String, optional), order (int). Add five to six test questions with varied input types and at least two with validation regex.

Create a QuestionnairePage with a Route Parameter questionnaireId. Add a Backend Query on the questions subcollection ordered by the order field. Add a Column with Generate Dynamic Children bound to the query results. Inside each dynamic child, use a Conditional Builder checking inputType: text and number map to TextField (number gets keyboardType number), email maps to TextField with email keyboard, phone to TextField with phone keyboard, date to DateTimePicker, singleSelect to RadioButton group populated from the options array, multiSelect to a CheckboxGroup with the options. Place the questionText as a label Text above each input.

Add a Page State variable answers (JSON type, default empty map) and a variable submitAttempted (Boolean, default false). On each input widget's On Changed callback, update the answers Map: set the key as the question document ID and the value as the entered data. For singleSelect, store the selected option string. For multiSelect, store the selected options as a list. For date, store the selected DateTime. This accumulates all responses in one structured Map for validation and submission.

On the Submit button tap, first set submitAttempted to true. Loop through the question documents. For each question where isRequired is true, check that answers[questionId] exists and is not empty. For questions with a validationRegex, check that the answer matches the pattern using a Custom Function that calls RegExp(regex).hasMatch(value). If any validation fails, show a SnackBar listing the first failing question. Display inline red error text below each invalid field using Conditional Visibility: show when submitAttempted is true AND the field fails validation.

1// Custom Function: validateRegex
2bool validateRegex(String value, String regex) {
3  if (regex.isEmpty) return true;
4  return RegExp(regex).hasMatch(value);
5}

After all validations pass, create a document in questionnaire_responses with fields: questionnaireId, userId (current user or anonymous identifier), answers (the complete Map), submittedAt (server timestamp). Show a success SnackBar or navigate to a thank-you page. Add a LinearPercentIndicator at the top of the page bound to the number of answered questions divided by total questions to show progress as the user fills in responses.