title: How to create rating star bar properly?
body: <p>I am trying to create a star bar for user ratings, the following image is from the play store to illustrate what I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/8PVti.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/8PVti.gif" alt="enter image description here"></a></p>
  
  <p>I have been able to achieve the following, which is functional as you can see, but when I look at my code, I feel like there must be a smarter way to do it, and the really bugging part is that <code>IconButton</code> hit area is being shifted up a little bit,so when you touch the actual star it does not register as a touch event (i.e: you have to aim higher than where the button is positioned in order for your touch to be registered, which makes for a bad UX) you can check what I mean by keeping an eye on the splash effect when I click on any of the stars:</p>
  
  <p><a href="https://i.stack.imgur.com/YNQuH.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/YNQuH.gif" alt="enter image description here"></a></p>
  
  <pre><code>var _myColorOne = Colors.grey;
    var _myColorTwo = Colors.grey;
    var _myColorThree = Colors.grey;
    var _myColorFour = Colors.grey;
    var _myColorFive = Colors.grey;
  
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
       appBar: new AppBar(
         title: new Text("My Rating"),
       ),
        body:  new Center(
          child: new Container(
            height: 10.0,
            width: 500.0,
            child: new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  new IconButton(icon: new Icon(Icons.star),
                    onPressed: ()=&gt;setState((){
                      _myColorOne=Colors.orange;
                      _myColorTwo=null;
                      _myColorThree=null;
                      _myColorFour=null;
                      _myColorFive=null;
                  }),color: _myColorOne,),
                  new IconButton(icon: new Icon(Icons.star),
                    onPressed: ()=&gt;setState((){
                      _myColorOne=Colors.orange;
                      _myColorTwo=Colors.orange;
                      _myColorThree=Colors.grey;
                      _myColorFour=Colors.grey;
                      _myColorFive=Colors.grey;
                  }),color: _myColorTwo,),
                  new IconButton(icon: new Icon(Icons.star), onPressed: ()=&gt;setState((){
                    _myColorOne=Colors.orange;
                    _myColorTwo=Colors.orange;
                    _myColorThree=Colors.orange;
                    _myColorFour=Colors.grey;
                    _myColorFive=Colors.grey;
                  }),color: _myColorThree,),
                  new IconButton(icon: new Icon(Icons.star), onPressed: ()=&gt;setState((){
                    _myColorOne=Colors.orange;
                    _myColorTwo=Colors.orange;
                    _myColorThree=Colors.orange;
                    _myColorFour=Colors.orange;
                    _myColorFive=Colors.grey;
                  }),color: _myColorFour,),
                  new IconButton(icon: new Icon(Icons.star), onPressed: ()=&gt;setState((){
                    _myColorOne=Colors.orange;
                    _myColorTwo=Colors.orange;
                    _myColorThree=Colors.orange;
                    _myColorFour=Colors.orange;
                    _myColorFive=Colors.orange;
                  }),color: _myColorFive,),
                ],
  
            ),
          ),
        ),
      );
    }
  </code></pre>
  
  <p>So is what is the better approach here?</p>