How to make a Custom Dialog for Rating in Flutter?

Flutter, being growing choice for many developers now a days has yet many things to be explored about. Today, I would like to display how you can have a Custom Dialog in Flutter?

I don\’t need to go to the basics of setting up your flutter project. I am assuming you have one already running. The dialog we will build will be for rating and review.

We will begin by making a small stateless widget that will be used to display the stars for our rating widget (since flutter consists of widgets throughout it\’s framework). We will call it ReviewStars.

class ReviewStars extends StatelessWidget {
  final int rating;
  final Function updateRating;
  ReviewStars({this.rating, this.updateRating});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(icon: rating > 0 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(1)),
        IconButton(icon: rating > 1 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(2)),
        IconButton(icon: rating > 2 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(3)),
        IconButton(icon: rating > 3 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(4)),
        IconButton(icon: rating > 4 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(5)),
      ],
    );
  }
}

This widget will have two parameters, where one is the Rating value and the other is a Function that will be passed from the parent widget. This widget will have a row where we will keep our Stars as IconButton. The colors of the IconButton will change depending on the value of the rating variable. We are using ternary operator to get the Star and Outlined Star.

Now our actual Review Widget, which will have a child of the ReviewStars is here:

class ReviewDialog extends StatefulWidget {
  @override
  _ReviewDialogState createState() => _ReviewDialogState();
}

class _ReviewDialogState extends State<ReviewDialog> {
  int rating = 0;
  int userId;
  TextEditingController remarksController = TextEditingController();

  updateRating(int val){
    setState(() {
      rating = val;
    });
  }

  @override
  void initState() {
    super.initState();
    userId = 0;
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))
        ),
        title: Column(
          children: <Widget>[
            Text(\'Your Opinion Matters\'),
            SizedBox(height: 10,),
            ReviewStars(rating: rating, updateRating: (val) => updateRating(val),),
            TextFormField(
              maxLines: 3,
              minLines: 1,
              decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                hintText: \'Remarks\',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: BorderSide.none,
                ),
              ),
              controller: remarksController,
            ),
            Row(
              children: [
                Expanded(
                  child: RaisedButton(
                    child: Text(\'Rate\'),
                    onPressed: () {
                      //TODO: Do your action
                    },
                  ),
                ),
              ],
            )
          ],
        )
    );
  }
}

Then in our ReviewWidget we will be displaying a title, the RatingStars widget, a remarks column and a button for submitting the final rating.

We will be calling this widget using the showDialog method of Flutter:

showDialog(context: context, builder: (context){
  return ReviewDialog();
});

The result will look like this:

Thank you for reading this article. If you would like to learn more make sure to follow this blog or bookmark it.