Flutter Create Custom Star Rating Bar Widget Android iOS Example

Star rating bar is used to get user opinion about application using graphical way. There are mostly 5 Star presenting on mobile screen with 1 to 5 star rating. User can select any given star and according to that the rating will be counted automatically. There is no fix widget yet available in flutter to create Custom Star rating bar widget but using the smooth_star_rating custom component we can easily configure star rating bar widget for our flutter application.

Contents in this project Flutter Create Custom Star Rating Bar Widget Android iOS Example Tutorial:

1. Before getting started we need to configure the smooth_star_rating component manually in our flutter project. So open your flutter project’s pubspec.yaml file.

2. Open pubspec.yaml file in Code editor, find dependencies block. Put smooth_star_rating: 1.0.3 just below it like i did in below code.

Source code for my pubspec.yaml file:

3. Now open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get  command. This command would download the newly added package in your flutter project and synchronize it automatically.

4. Open your project’s main.dart file and import material.dart package and smooth_star_rating.dart package.

5. Call our main MyApp class using void main runApp() method.

6. Create MyApp class extends with State less widget. This is our root parent class. In this class we would call the RatingBar() class.

7. Create a class named as RatingBar extends with State full widget. In this class we would create the createState() method with RatingBarWidget class. This method would enable the mutable state management in given class.

8. Create a class named as RatingBarWidget extends with State. This is our main class in which we are making rating bar widget.

9. Create a float double variable named as rating with default value 3. This is our default star selecting in widget.

10. Create SmoothStarRating widget in Widget build area in RatingBarWidget class. We would also make a Text widget here with rating widget to current selected rating bar value.

SmoothStarRating : The Star rating bar widget.

  • allowHalfRating : Used to enable half start rating.
  • onRatingChanged : Calls each time when user selects star rating bar.
  • starCount : Number of stars shows in rating bar widget.
  • rating : Used to set default selected starts value.
  • size : Size of Starts in widget.
  • color : Star icon color.
  • borderColor : Star icon border color.

11. Complete source code for main.dart file:

Screenshots:

Flutter Create Custom Star Rating Bar Widget Android iOS Example

Leave a Reply

Your email address will not be published. Required fields are marked *