Flutter Rating Widget:

Flutter Rating Widget is a simple component which 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 a important aspect in day to day activities to keep track of the  products and its standards and analyse its 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 review system that allow to add an additional features for your users to show their feedback regarding your products/services. Flutter Rating Widget will help you provide your users to express their feeeling or feedback regarding your apps, products, services, and others. This Rating widget support all fraction on rating system that helps you to analysize the exact feedback.

Some of the best practice and example for rating system is any eCommerce, online shopping, delivery application where customer can share their rating based on the product that they purchase and used. That helps you users to get the right inforamtion by a general customer to establish a trust with another user/custmoer those are new on your platform. e.g. You can see Amazon, Walmart, Flipkart, Ubereats, Uber, OLA and many app thay keep the rating system to analyse your experiance with their product and services.

Rating System
Rating Example

Now here I am dicuss about, How we build that rating system in Flutter 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 fully customizable Flutter widget in your app. Since it has been recognized as one of the largest and best UI library by Flutter dev community. For more details you can check out GitHub repositoy:

Why GetWidget Rating Widget?

It allows 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 cutomizable 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.

GetWidget Rating:

GetWidget Rating is a rating component that allows build 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 to build 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.

GetWidget Rating Widget can be used in the following ways:

Basic GetWidget Rating Widget:

It will allows to build a nice a simple rating system with star where here user rate their feedbacks based on star. 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 Star Rating
Flutter Star Rating

GF Rating 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.

GF Rating using a Text Field:

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

Custom GF Rating:

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 Start:

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

Getting started will guide you 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: ^1.0.4

Keep playing with the pre-built UI components.

Example of a Basic Flutter Stat Rating in GF Rating Widget:

import 'package:getwidget/getwidget.dart';

double _rating = 3;

GFRating(
  value: _rating,
  onChanged: (value) {
    setState(() {
      _rating = value;
    });
  },
),
Flutter Start Rating
Basic Flutter Start Rating

Example of a GF Ratings 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;
              });
            },
          ),

Example of GF Rating 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),
            ),
          ),

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

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

GF Rating
GFRating is a row of star icon, one can touch or drag the row of icons to set the rating.

Conculsion:

Here we discuss what Flutter Ratings are? And how we can use them in our Flutter app through GetWidget Rating component. Here we can rating with text form fiels and customised rating which is nowadays important in any kind of applications.

FAQ's:

Q. How to use half star rating?

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

Q. What are the customizable properties used?

Ans. The customizable properties include the rating icons, basically its 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 customise the text form field to our needs. Hence customizable properties are full flexible. You can check out all custom propertise component on GetWidget Rating Widget Properties.

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

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

Q. Does this rating widget support Flutter web?

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