Creating a Rating Dialog in Flutter

Showing some information to the user is an awesome idea and for that is most common that we use dialogs. In Flutter, this amazing UI Toolkit, we have some ways to build Dialogs.

In this post I’ll show you how to create dialogues using the AlertDialog widget. We’ll build a Rating Dialog that return the rate.

Step 1: Preparing your project

First of all you’ll create a flutter project using the command

flutter create rating_dialog

As you already know the above command will create a Flutter project inside a folder named rating_dialog.

Let's structure our project. Inside of lib folder we'll create a folder named src and inside of src we’ll create others two folders, the first one is widgets and the second is screens.

Our folder structured is showed below.

image 1 — folder structure

As you can see we create a file named home_screen.dart inside of screens and a file named rating_dialog.dart inside of widgets.

The content of home_screen is showed below.

Note the onPressed method in line 20. We're using the showDialog function to inflate to te user a dialog that content is a widget called RatingDialog().

We'll implement this widget in the next step and explain how showDialog() works too but before let me show you the content of our main.dart file.

Now we can focus on RatingDialog widget. So here we go!

Step 2: Implementing the RatingDialog widget

This widget will be a Stateful because we need to manage the state of how much stars are selected,

For that we'll use the AlertDialog widget. This widget creates a predefined Dialog. In this tutorial we’ll use some attributes of them. So in our RatingDialog widget we have:

@override
Widget build(BuildContext context) {
  return AlertDialog(
    title: Center(child: Text('Rate this post'),),
    content: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        _buildStar(1),
        _buildStar(2),
        _buildStar(3),
        _buildStar(4),
        _buildStar(5),
      ],
  ),
    actions: <Widget>[
    FlatButton(
      child: Text('CANCEL'),
      onPressed: Navigator.of(context).pop,
    ),
    FlatButton(
      child: Text('OK'),
      onPressed: () {
        Navigator.of(context).pop(_stars);
      },
     )
    ],
  );
}

We used the attributes title, context and content. The context will be the current context of dialog, title is the title of the dialog and content is the content of it.

In the content we added a Row() with five buttons that consists of an InkWell with an Icon child. This give us a behavior like StarButton.

Each button has a number of stars and when some button is clicked the stars change colors.

So if the user clicks on fourth star, four stars are activated and so on.As you can see in the _buildStar() method.

Widget _buildStar(int starCount) {
  return InkWell(
    child: Icon(
      Icons.star,
      color: _stars >= starCount ? Colors.orange : Colors.grey,
    ),
    onTap: () {
      setState(() {
        _stars = starCount;
      });
    },
  );
}

Finally we have a actions property where we put two buttons, a CANCEL button and a OK button.

In the two we added a Navigator.pop. The only one difference is that in the OK button we are passing the number of stars selected as parameter of Navigator.pop.

Below you can see the full content of our Widget:

Step 3: Using our widget

Now that our widget is already created let's look at onPressed method of our RaisedButton in the home_screen.dart file. If you don't remember, back to step one to see it.

The showDialog is a function that shows a material dialog above the contents of the app. It takes some arguments but for the purposes of this tutorial we'll use only two.

The first one is the BuildContext and the second is a builder function that returns the Dialog widget. See the code snippet

showDialog(
  context: context,
  builder: (_) => RatingDialog()
);

But in the onPressed we have more informations. Note that our function is a async function and that we added an await before showDialog and that we assign it to a variable.

This important to get the number of stars that are selected. Remember the OK button? That param in the Navigator.pop will be returned here.

But what's happen with the CANCEL button? In the cancel we haven't params so the returned value is null.

And finally we have a verification of returned value and if this value is null the function is stoped with a return instruction. Else if the verification isn't null we print the number of stars in console.

Summary

We're done. Our rating dialog is awesome! It was so simple to make and give to use very useful content, like some widgets, dialog, passing data from dialog, etc.

As you saw, we used setState to manage the state. Hey, maybe you have better options like MobX or BLoC. So, try it. Change this code to use another state management this will be amazing!

That’s all, see ya.

References

• AlertDialog — https://api.flutter.dev/flutter/material/AlertDialog-class.html
• Stateful vs Stateless — https://flutter.dev/docs/development/ui/interactive