# How to Create a Custom Feedback Screen for Your FlutterFlow App

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

Create an in-app feedback form with a tappable star rating (1-5 stars using a Custom Widget or Row of Icon widgets), a category DropDown (Bug Report, Feature Request, General), a multiline TextField with 500-character limit and counter, and an optional screenshot upload via FlutterFlowUploadButton. Store feedback in a Firestore feedback collection with userId, rating, category, description, screenshotUrl, and timestamp. Trigger a Cloud Function notification to your team on new feedback.

## Building an In-App Feedback Form in FlutterFlow

User feedback is essential for improving your app. A built-in feedback form makes it easy for users to report bugs, request features, and share opinions without leaving the app. This tutorial builds a complete feedback flow with rating, categorization, and team notification.

## Before you start

- A FlutterFlow project with Firestore and Firebase Storage configured
- A feedback collection in Firestore
- Understanding of Custom Widgets or Component State for the star rating

## Step-by-step guide

### 1. Build a tappable star rating widget using Icon widgets

Create a Component called StarRating with Component State selectedRating (int, default 0) and an Action Parameter onRatingChanged. Build a Row of 5 IconButton widgets. Each icon shows star (filled, amber) if its index <= selectedRating, or star_border (outline, grey) if index > selectedRating. On each icon tap, set selectedRating to that icon's index (1-5) and call the onRatingChanged callback with the value. This creates a familiar star rating experience.

**Expected result:** Five tappable stars that fill based on the selected rating and pass the value to the parent.

### 2. Create the feedback form with category dropdown and text input

On your FeedbackPage, add a Column with padding 16. Children: Text 'Send Feedback' (Headline Small), SizedBox(16), Text 'Rate your experience' (Body Medium), StarRating Component (bind onRatingChanged to update Page State feedbackRating), SizedBox(16), DropDown labeled 'Category' with options from a static Option Set (Bug Report, Feature Request, General Feedback, UI Issue), SizedBox(16), TextField labeled 'Description' (maxLines: 5, maxLength: 500, counterText showing remaining characters), SizedBox(16), FlutterFlowUploadButton labeled 'Attach Screenshot (optional)'.

**Expected result:** A complete feedback form with star rating, category selector, text input with counter, and screenshot upload.

### 3. Submit feedback to Firestore with all collected data

Add a Submit button (Primary, full width). On Tap action flow: validate that rating > 0 and description is not empty. If valid: Create Document in feedback collection with fields: userId (currentUser.uid), rating (Page State feedbackRating), category (DropDown value), description (TextField value), screenshotUrl (upload URL or null), timestamp (now), status ('new'). On success: Show Snackbar 'Thank you for your feedback!' and navigate back. On failure: Show error Snackbar.

**Expected result:** Feedback submits to Firestore with all form data and confirms success to the user.

### 4. Set up a Cloud Function to notify your team on new feedback

Create a Firestore-triggered Cloud Function that fires on new documents in the feedback collection. The function reads the new document fields and sends a notification to your team via Slack webhook (HTTP POST with formatted message) or email via SendGrid. Include the rating, category, description, and a link to the Firestore document. This ensures your team sees feedback immediately without checking a dashboard.

**Expected result:** New feedback triggers an automatic notification to your team via Slack or email.

### 5. Add a character counter to the description TextField

Bind the TextField's maxLength to 500. FlutterFlow automatically shows a counter (e.g., '145/500') when maxLength is set. Style the counter in grey Body Small. If you want a custom counter, use a Page State variable that tracks the TextField length on every keystroke and display it in a separate Text widget below the field.

**Expected result:** Users see how many characters remain as they type, preventing overlength submissions.

## Complete code example

File: `FlutterFlow Feedback Form`

```text
PAGE: FeedbackPage
PAGE STATE:
  feedbackRating: int = 0

WIDGET TREE:
  Column (padding: 16)
    ├── Text "Send Feedback" (Headline Small)
    ├── SizedBox (16)
    ├── Text "Rate your experience" (Body Medium)
    ├── StarRating Component → updates feedbackRating
    ├── SizedBox (16)
    ├── DropDown "Category"
    │     Options: Bug Report, Feature Request, General Feedback, UI Issue
    ├── SizedBox (16)
    ├── TextField "Description" (maxLines: 5, maxLength: 500)
    ├── SizedBox (16)
    ├── FlutterFlowUploadButton "Attach Screenshot"
    ├── SizedBox (24)
    └── Button "Submit Feedback" (Primary, full width)
          On Tap:
            1. Validate rating > 0 && description not empty
            2. Create Document: feedback/
                 userId, rating, category, description,
                 screenshotUrl, timestamp, status: "new"
            3. Show Snackbar "Thank you!"
            4. Navigate Back

STAR RATING COMPONENT:
  Component State: selectedRating (int)
  Row of 5 IconButtons
    Icon: index <= selectedRating ? star (amber) : star_border (grey)
    On Tap: set selectedRating = index, callback(index)

CLOUD FUNCTION (on feedback collection write):
  Read new document → Format Slack message → POST to webhook URL
```

## Common mistakes

- **Not limiting the TextField character count** — Users paste entire error logs or write thousands of characters, breaking the layout and potentially hitting Firestore's 1MB document size limit. Fix: Set maxLength to 500 on the TextField. This enforces the limit at the input level and shows a character counter.
- **Requiring a screenshot for all feedback** — Most users provide text-only feedback. Making screenshot mandatory adds friction that discourages submissions. Fix: Make screenshot upload optional. Only show it as an available option, not a required field.
- **Not categorizing feedback with a dropdown** — All feedback goes into one unsorted pile. Your team cannot prioritize bugs over feature requests or filter by type. Fix: Add a category DropDown with options like Bug Report, Feature Request, General Feedback. Store the category for filtering and prioritization.

## Best practices

- Add a star rating for quick quantitative feedback alongside text
- Categorize feedback with a DropDown for team prioritization and filtering
- Limit description text to 500 characters with a visible counter
- Make screenshot attachment optional to reduce submission friction
- Trigger team notifications via Cloud Function on new feedback documents
- Add a status field (new/reviewed/resolved) for feedback management
- Show a confirmation Snackbar and navigate back after successful submission

## Frequently asked questions

### Can I view feedback in the app instead of just Firestore Console?

Yes. Build an admin page with a ListView querying the feedback collection. Filter by category, sort by date, and add a status dropdown to mark items as reviewed or resolved.

### How do I prevent spam feedback?

Require authentication before showing the feedback form. Add rate limiting by checking if the user submitted feedback in the last hour. Add a CAPTCHA for anonymous submissions.

### Can I reply to user feedback in-app?

Yes. Add a replies subcollection under each feedback document. Build a chat-like interface in the admin view. Notify the user via push notification when a reply is posted.

### Should I use a star rating or thumbs up/down?

Star rating (1-5) provides more granular data for analytics. Thumbs up/down is simpler and has higher completion rates. Use stars for detailed feedback forms, thumbs for quick inline widgets.

### Can I export feedback data to a spreadsheet?

Yes. Create a Cloud Function that queries the feedback collection and generates a CSV. Trigger it from an admin button that downloads the file.

### Can RapidDev help build a feedback management system?

Yes. RapidDev can build feedback forms, admin dashboards, analytics, reply systems, and integrations with tools like Slack, Jira, and email.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-feedback-screen-for-your-flutterflow-app
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-feedback-screen-for-your-flutterflow-app