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.
|
1 2 3 4 5 |
dependencies: http: ^0.12.0 smooth_star_rating: 1.0.3 flutter: sdk: flutter |
Source code for my pubspec.yaml file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
name: app description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: http: ^0.12.0 smooth_star_rating: 1.0.3 flutter: sdk: flutter cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true |
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.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:smooth_star_rating/smooth_star_rating.dart'; |
5. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
6. Create MyApp class extends with State less widget. This is our root parent class. In this class we would call the RatingBar() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Star Rating Bar in Flutter')), body: Center( child: RatingBar() ) ) ); } } |
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.
|
1 2 3 4 5 |
class RatingBar extends StatefulWidget { RatingBarWidget createState() => RatingBarWidget(); } |
8. Create a class named as RatingBarWidget extends with State. This is our main class in which we are making rating bar widget.
|
1 2 3 4 |
class RatingBarWidget extends State { } |
9. Create a float double variable named as rating with default value 3. This is our default star selecting in widget.
|
1 |
double rating = 3 ; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Center( child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(12.0), child: Text('Star Raiting Bar', style: TextStyle(fontSize: 22))), SmoothStarRating( allowHalfRating: false, onRatingChanged: (value) { setState(() { rating = value ; }); }, starCount: 5, rating: rating, size: 40.0, color: Colors.green, borderColor: Colors.green, spacing:0.0, ), Padding( padding: const EdgeInsets.all(12.0), child: Text('Rating = '+'$rating', style: TextStyle(fontSize: 22))), ], ), ))); } |
11. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
import 'package:flutter/material.dart'; import 'package:smooth_star_rating/smooth_star_rating.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Star Rating Bar in Flutter')), body: Center( child: RatingBar() ) ) ); } } class RatingBar extends StatefulWidget { RatingBarWidget createState() => RatingBarWidget(); } class RatingBarWidget extends State { double rating = 3 ; @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Center( child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(12.0), child: Text('Star Raiting Bar', style: TextStyle(fontSize: 22))), SmoothStarRating( allowHalfRating: false, onRatingChanged: (value) { setState(() { rating = value ; }); }, starCount: 5, rating: rating, size: 40.0, color: Colors.green, borderColor: Colors.green, spacing:0.0, ), Padding( padding: const EdgeInsets.all(12.0), child: Text('Rating = '+'$rating', style: TextStyle(fontSize: 22))), ], ), ))); } } |
Screenshots:
