Flutter Rating Widget - A component to builds additional feature to get Feedbacks

Flutter Rating Widget - A component to builds additional feature to get Feedbacks

Flutter Rating Bar Widget

Flutter Rating Widget is a simple component that is used to rate or rank a component or any of the components based on the standard of quality or performance etc. Nowadays rating has been an important aspect in day-to-day activities to keep track of the products and their standards and analyze their performance based on the ratings given. Rating plays a vital role in many applications as it clearly shows how a product is and tells in a nutshell about the product's performance. Rating is important for a review system that allows adding additional features for your users to show their feedback regarding your products/services.

Now here I am discussing, How we build that rating system in the Flutter Rating widget while using of GetWidget UI Library.

Now you wondering what is GetWidget UI Library and Why this? Here a short introduction about GetWidget and why this?

GetWidget is an open-source UI Library for Flutter App Development. It has 1000+ pre-built Flutter Widgets that help you to build a fully customizable Flutter widget in your app. Since it has been recognized as one of the largest and best UI libraries by the Flutter dev community. For more details you can check out the GitHub repository:

Why GetWidget Rating-Widget?

It allows you to speed up your Flutter app development by 20-30%. It has almost all widget that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.

Now here is i am going to talk about what is GetWidget Rating widget and how we implement this on Flutter app to build awesome Flutter rating widget for an app.

Also read - Is Flutter Worth Learning? Top 7 Reasons to Learn Flutter

Flutter Rating Widget With GFRating

GFRating is a rating component that allows building a rating widget in your Flutter applications. Basically, GFFlutter Rating is a row of star icons and one can touch or drag the row of star icons to set the rating of any given component or product. GetWidget Rating widget allows building a rating system that will also handle the fraction star rating. It has many types of variant or custom properties that provide the flexibilities to build a rating feature in your applications.

Flutter Basic Rating Widget

It will allow building a nice simple rating system with stars where here user rates their feedbacks based on stars. Since it has nothing much with styling and logic it has a small code snippet to build and give a nice feel and look with the star icon rating.

Flutter Rating Widget With Icons

GF Rating can also be used with any kind of icons, as it gives flexibility to the user to use any such kind of icons for rating a product.

Flutter Rating Bar widget using a Text Field

GF Rating can also be used inside a text field. The user has to enter the number of ratings to be given in the text filed and click the OK Button, and the rating will be reflected.

Flutter custom rating Widget using GFRating

This a very flexible kind of rating as it allows the user to use icons, texts, etc to rate the component and can be used in any kind of applications

How to Get Started

Now here is the guide about how we should start developing Flutter Rating Widget with the use of GetWidget UI Library.

Getting started will guide you on how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^4.0.0

Keep playing with the pre-built UI components.

Example of a Basic Flutter Star Rating Bar in Getwidget

import 'package:getwidget/getwidget.dart';

double _rating = 3;

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

Flutter Star Rating Widget Bar Example Code

Example of a GF Flutter Rating Bar widget with icons

import 'package:getwidget/getwidget.dart';

 double _iconRating = 2;

  GFRating(
            color: GFColors.SUCCESS,
            borderColor: GFColors.SUCCESS,
            filledIcon: Icon(
              Icons.check,
              color: GFColors.DANGER,
            ),
            size: GFSize.SMALL,
            value: _iconRating,
            onChanged: (value) {
              setState(() {
                _iconRating = value;
              });
            },
          ),

Flutter Rating-Widget with icons example code

Example of GF Flutter Rating widget with Text Filed

import 'package:getwidget/getwidget.dart';
final _ratingController = TextEditingController();
double _userRating = 4.5;

@override
void initState() {
  super.initState();
  _ratingController.text = '4.5';
}

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

Customised Rating

import 'package:getwidget/getwidget.dart';

GFRating(
   color: GFColors.DANGER,
    borderColor: GFColors.DANGER,
    value: _customrating,
    showTextForm: true,
    halfFilledIcon: Icon(
    Icons.star_half,
    ),
       allowHalfRating: true,
       filledIcon: Icon(Icons.insert_emoticon),
       itemCount: 6,
       size: GFSize.SMALL,
       controller: _customController,
       suffixIcon: GFButton(
       type: GFButtonType.transparent,
       onPressed: () {
            setState(() {
                 _customrating = double.parse(_customController.text ??                       '0.0');
                });
              },
              child: Icon(Icons.insert_emoticon),
            ),
          ),

Flutter Rating Widget with text example code

If you would to more customization in the Flutter rating bar then check out Custom Properties of GetWidget Rating widget:

Check out all custom features of our Flutter Rating Widget here:

How to use half-star rating?

To use a half star rating property simply allow the allowHalfRating value to be true.

What are the customizable properties used?

The customizable properties include the rating icons, basically, it's a star now but any other icons can be used and we can control the size, color of the icons. when using a text form field, we can customize the text form field to our needs. Hence customizable properties are fully flexible. You can check out all custom properties components on GetWidget Rating Widget Properties.

Could we use GetWidget Rating Widget for Production/Commercial app?

Yes, You can use this library in your commercial applications.

Does this rating widget support Flutter web?

Yes, this flutter rating widget support for Flutter web application too.