How to Build a Multi-Step Survey with Conditional Logic in FlutterFlow

Create a surveys collection with fields: title (String), description (String), questionCount (int), createdBy (String). Under each survey document, create a questions subcollection with fields: questionText (String), type (String: singleChoice, multiChoice, text, rating, scale), options (String array, used for choice types), isRequired (bool), order (int), conditionalNext (Map: keys are option indexes as strings, values are the target question order numbers). For example, if question 2 has conditionalNext {"0": 5, "1": 3}, selecting option 0 jumps to question order 5 while option 1 goes to question order 3. Create a survey_responses collection with fields: surveyId (String), userId (String), responses (Map of questionId to answer), completedAt (Timestamp).

Create a SurveyPage with Route Parameter surveyId. Add a Backend Query for the questions subcollection ordered by order ascending. Store all questions in Page State questionList (Document List). Add Page State: currentQuestionIndex (int, tracking position in questionList), responses (Map, keyed by questionId), questionPath (int List, tracking which question orders the user has visited). At the top, display a LinearPercentIndicator where the percent is calculated from the current path position relative to the estimated total remaining questions in the current branch. Below, add a PageView with NeverScrollableScrollPhysics.

Inside each PageView page, add a Column with the questionText in Headline Small style. Below, use a Conditional Builder (or stacked Conditional Visibility containers) that checks the question type field. For singleChoice: display a RadioButton group bound to options. For multiChoice: display a CheckboxGroup. For text: display a multiline TextField. For rating: display a row of 5 star IconButtons. For scale: display a Slider from 1 to 10. When the user selects or enters a value, update the responses Map in Page State with the questionId as key and the answer as value.

Add a Next button below the question area. On tap, first validate that required questions have an answer (check isRequired and responses Map). Then check if the current question has a conditionalNext map with a matching key for the selected answer index. If a match exists, find the question in questionList with the matching order value and animate the PageView to that page index. If no conditional match exists, go to the next sequential question. Append the visited question order to questionPath for back-navigation support. On the last reachable question, change the button to Submit.

When the user taps Submit on the final question, create a document in survey_responses with surveyId, userId (current user), responses Map (the complete Page State responses), and completedAt (server timestamp). Navigate to a ThankYouPage showing a confirmation message, the number of questions answered, and an optional summary of their responses. Add a Back button that returns to the survey list.