Simple Flutter rating bar | DIY: NoPlugin | Flutter Beginner

Hy, It's my First article in DIY (Do It Yourself), What we going to archive is the Flutter rating bar without using any library.

Photo by Myrlene NUMA on Unsplash

Take scissors and paper, ahh Just kidding…

Let's see the code.

Simple as that,

Here comes DIY part:

1. First, we generate 5 widgets using List<XXX>.generate method.
2. Inside each Widget, we configure two-section firstly Show Rating only and Modifying Rating widget.
3. For show rating, There are two case have to see
   (i) Icon(Full, Half, empty)
   (ii) Color(Filled, Empty color)

rating.ceil() == (index + 1) && rating != rating.ceil() ? Icons.star_half_outlined : Icons.star

Let's take an example as Rating 3.5,

When the rating[3.5] is equal to index +1 [index start from 0] and rating.ceil() [3.5 ceil => 4] is not equal to the rating[3.5] then we show Full star or else Half star.

& Same time for colour

rating[3.5] > index if true then its Fill Colored or Empty Colored.

That's all, Put all index value from 0 to 5 we can get a working rating bar.

For choosable rating just update the index in rating whenever a click happen using setState({}) method ;)