Rating Bar In Flutter
This flutter tutorial post is rating bar display in flutter. It is display half rating.
Property
SmoothStarRating( allowHalfRating: true, starCount: 5, rating: 4.5, size: 20, color: Colors.blue, borderColor: Colors.black, )
Screenshot :

Rating Bar In Flutter
main.dart
import 'package:flutter/material.dart'; import 'smooth_star_rating.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Tutorial', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey.shade200, appBar: AppBar( title: Text("Rating bar flutter"), ), body: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SmoothStarRating( allowHalfRating: true, starCount: 5, rating: 4.5, size: 20, color: Colors.blue, borderColor: Colors.black, ), Text( "15 Reviews", style: TextStyle(fontSize: 14, color: Colors.grey.withOpacity(0.8)), ) ])); } }
smooth_star_rating.dart
import 'package:flutter/material.dart'; typedef void RatingChangeCallback(double rating); class SmoothStarRating extends StatelessWidget { final int starCount; final double rating; final RatingChangeCallback onRatingChanged; final Color color; final Color borderColor; final double size; final bool allowHalfRating; final double spacing; SmoothStarRating( {this.starCount = 5, this.rating = 0.0, this.onRatingChanged, this.color, this.borderColor, this.size, this.spacing = 0.0, this.allowHalfRating = true}) { assert(this.rating != null); } Widget buildStar(BuildContext context, int index) { Icon icon; if (index >= rating) { icon = new Icon( Icons.star_border, color: borderColor ?? Theme.of(context).primaryColor, size: size ?? 25.0, ); } else if (index > rating - (allowHalfRating ? 0.5 : 1.0) && index < rating) { icon = new Icon( Icons.star_half, color: color ?? Theme.of(context).primaryColor, size: size ?? 25.0, ); } else { icon = new Icon( Icons.star, color: color ?? Theme.of(context).primaryColor, size: size ?? 25.0, ); } return new GestureDetector( onTap: () { if (this.onRatingChanged != null) onRatingChanged(index + 1.0); }, onHorizontalDragUpdate: (dragDetails) { RenderBox box = context.findRenderObject(); var _pos = box.globalToLocal(dragDetails.globalPosition); var i = _pos.dx / size; var newRating = allowHalfRating ? i : i.round().toDouble(); if (newRating > starCount) { newRating = starCount.toDouble(); } if (newRating < 0) { newRating = 0.0; } if (this.onRatingChanged != null) onRatingChanged(newRating); }, child: icon, ); } @override Widget build(BuildContext context) { return new Material( color: Colors.transparent, child: new Wrap( alignment: WrapAlignment.start, spacing: spacing, children: new List.generate( starCount, (index) => buildStar(context, index))), ); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in