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.
Prerequisites
- 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
Build a tappable star rating widget using Icon widgets
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.
Create the feedback form with category dropdown and text input
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.
Submit feedback to Firestore with all collected data
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.
Set up a Cloud Function to notify your team on new feedback
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.
Add a character counter to the description TextField
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 working example
1PAGE: FeedbackPage2PAGE STATE:3 feedbackRating: int = 045WIDGET TREE:6 Column (padding: 16)7 ├── Text "Send Feedback" (Headline Small)8 ├── SizedBox (16)9 ├── Text "Rate your experience" (Body Medium)10 ├── StarRating Component → updates feedbackRating11 ├── SizedBox (16)12 ├── DropDown "Category"13 │ Options: Bug Report, Feature Request, General Feedback, UI Issue14 ├── SizedBox (16)15 ├── TextField "Description" (maxLines: 5, maxLength: 500)16 ├── SizedBox (16)17 ├── FlutterFlowUploadButton "Attach Screenshot"18 ├── SizedBox (24)19 └── Button "Submit Feedback" (Primary, full width)20 On Tap:21 1. Validate rating > 0 && description not empty22 2. Create Document: feedback/23 userId, rating, category, description,24 screenshotUrl, timestamp, status: "new"25 3. Show Snackbar "Thank you!"26 4. Navigate Back2728STAR RATING COMPONENT:29 Component State: selectedRating (int)30 Row of 5 IconButtons31 Icon: index <= selectedRating ? star (amber) : star_border (grey)32 On Tap: set selectedRating = index, callback(index)3334CLOUD FUNCTION (on feedback collection write):35 Read new document → Format Slack message → POST to webhook URLCommon mistakes when creating a Custom Feedback Screen for Your FlutterFlow App
Why it's a problem: Not limiting the TextField character count
How to avoid: Set maxLength to 500 on the TextField. This enforces the limit at the input level and shows a character counter.
Why it's a problem: Requiring a screenshot for all feedback
How to avoid: Make screenshot upload optional. Only show it as an available option, not a required field.
Why it's a problem: Not categorizing feedback with a dropdown
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
Build an in-app feedback form in FlutterFlow with a 1-5 star rating widget, category dropdown, character-limited text area, optional screenshot upload, and Firestore storage. Include a Cloud Function for team notification on new submissions.
Create a form page with a heading, a row of 5 star icons, a dropdown, a multiline text field with character counter, an upload button, and a submit button.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation