Build beautiful feedback form with radio emoji buttons in flutter
Sometimes we need feedback from users and flutter provides a lot of ease in creating beautiful UIs. Let’s see how we can create a beautiful feedback form with radio buttons with a twist of emojis.
Here’s what I have done-
Before starting go ahead and clone the project from my github repository https://github.com/priyank-kumar-singh/flutter_radio_emoji.
You’ll find following files inside lib folder-
- main.dart
- form_field.dart
- radio_emoji.dart
- raised_fab.dart (Custom Raised Button)
- constants.dart
Let’s understand how we’ll achieve our goal.
Inside main.dart there’s a FeedbackScreen widget that contains lists of questions, feedbackValue, isFormFieldComplete, and a string for additional feedback.
- questions is a list that contains the questions which will be rendered on the FeedbackScreen.
- feedbackValue list contains the rating (1 to 5 and initially -1) selected for each question and each item at index i denotes the rating selected for the respective question in the ‘questions’ list.
- Similar to feedbackValue, isFormFieldComplete list represents the status of the i-th question. It represents if a question has been answered or not (by true or false).
- additionalComments is simply a string that we’ll use for some additional feedback that the user will add as a text.
Usually, radio buttons come in groups, and initially, no radio button is selected so we’ll set feedbackValue to -1 for all questions inside initState method, and since the list is empty so we’ll use the add method on the list and the same goes for isFormFieldComplete.
Then comes the build method which will build a scaffold with an appbar and a column with instructions to which we’ll append questions by using ..addAll method. Each question is then mapped and converted to a FeedbackFormField widget. This widget builds a column with a question in the first row and another row of five radio emoji buttons.
It takes id (or question number), a string (question text), group value (initially -1), a function that will trigger each time a radio button is tapped (this function will change the feedback value and set isFormFieldComplete to true for respective question), and a string which displays an error message for each question if the form is submitted but no radio button is selected for that question.
FeedbackFormField widget builds a RadioEmoji widget for each of the five radio buttons in the row and assigns them values from 1 to 5 which will be used as rating and together they form a group of five (change this data and see changes yourself). The handler function and group value received as parameters are further passed to the RadioEmoji widget to determine if the radio button is selected or not.
Finally comes the RadioEmoji widget which takes three parameters first is the value of the current emoji button, second is the group value (initially -1), and third is the onChange function which will trigger the handler function in the FeedbackScreen widget. Inside initState method emoji corresponding to current value will be created then animation controllers will be initialized to have an animation while switching between radios and set isSelected property to false initially.
Each emoji is wrapped inside a GestureDetector to detect taps and a container with transparent background to have a little bit of padding around the radio emoji button.
Each time a radio button is selected, the handler function will trigger and updates the groupValue for the respective group and initializes animation sequence for selected emoji and then all radio buttons get to rebuild and inside the build method of RadioEmoji, it will be checked if the new value is same as current emoji’s value if no then animation will be deinitialized for that radio emoji button and that’s it.
Download complete project: https://github.com/priyank-kumar-singh/flutter_radio_emoji.
Want more detailed explanation with video tutorial ?
Check out my youtube channel there you will find more amazing stuff. Link below-
