GF Flutter Rating

Banner image

GF Flutter Rating Bar

Flutter rating allows the user to start rating any of the products using the start icons as rating icons.

GF Flutter Rating Star and its Usage

GF Flutter Star Rating is a very simple widget that permits the users to rate with the help of star icons. Users can touch the icons to start rating.

The simple code of a basic GF Start Rating is as shown below.

GF Flutter Star Rating Widget

double _rating = 3;

  value: _rating,
  onChanged: (value) {
    setState(() {
      _rating = value;

GF Flutter Rating with TextField

If showTextForm true, it displays the GF Rating bar with a text field, that takes user input to show the rating.

The simple example code of the rating bar with textform is shown below.

final _ratingController = TextEditingController();
double _userRating = 4.5;

void initState() {
  _ratingController.text = '4.5';

  value: _userRating,
  showTextForm: true,
  controller: _ratingController,
  suffixIcon: GFButton(
    type: GFButtonType.transparent,
    onPressed: () {
      setState(() {
        _userRating = double.parse(_ratingController.text ?? '0.0');
    child: const Text('Rate'),

GF Flutter Rating Bar Custom Properties:

The look and feel of the GF Rating can be customized using the GF Rating properties.

itemCountdefines the total number of rating items
colordefines the color of items
borderColordefines the border color of [halfFilledIcon]
sizedefines the size of items. GFSize can be used for size variations like small. medium. large
allowHalfRatingif true, allow half rating of items. Default it will be in a true state
filledIcondefines the items when filled
halfFilledIcondefines the items when half-filled
defaultIcondefines the default items, when having filledIcon and halfFilledIcon
spacingdefines the space between items
valuedefines the rating value
onChangedreturn current rating whenever rating is updated
showTextFormif true, shows rating [TextFormField] with the rating bar, that allows the user input to show rating
suffixIcondefines the design and function of rating [TextFormField]'s suffix icon
controllercontrols the [TextField] Controller of rating [TextFormField]
inputDecorationsdefines the [InputDecoration] of rating [TextFormField]
margindefines the margin of rating [TextFormField]
paddingdefines the padding of rating [TextFormField]

Last Updated: February 4, 2022