A simple ratingbar for flutter which also include a rating bar indicator, supporting any fraction of rating.

Overview

FLUTTER RATING BAR

Pub License Web Demo GitHub code size in bytes GitHub stars

A simple yet fully customizable rating bar for flutter which also include a rating bar indicator, supporting any fraction of rating.

DEMO

Salient Features

  • Set minimum and maximum rating
  • Any widgets can be used as as rating bar/indicator items
  • Different widgets can be used in same rating bar as per position
  • Supports vertical layout
  • Glows on interaction
  • Supports RTL mode

Web Demo

Usage

Using Flutter Rating Bar

Rating Bar can be used in three ways.

First Way:

Using RatingBar.builder()

First Way

RatingBar.builder(
   initialRating: 3,
   minRating: 1,
   direction: Axis.horizontal,
   allowHalfRating: true,
   itemCount: 5,
   itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
   itemBuilder: (context, _) => Icon(
     Icons.star,
     color: Colors.amber,
   ),
   onRatingUpdate: (rating) {
     print(rating);
   },
);
Second Way:

Using RatingBar()

Second Way

RatingBar(
   initialRating: 3,
   direction: Axis.horizontal,
   allowHalfRating: true,
   itemCount: 5,
   ratingWidget: RatingWidget(
     full: _image('assets/heart.png'),
     half: _image('assets/heart_half.png'),
     empty: _image('assets/heart_border.png'),
   ),
   itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
   onRatingUpdate: (rating) {
     print(rating);
   },
);

Heart Icons are Available Here.

Third Way:

Using RatingBar.builder() with index

Third Way

RatingBar.builder(
    initialRating: 3,
    itemCount: 5,
    itemBuilder: (context, index) {
       switch (index) {
          case 0:
             return Icon(
                Icons.sentiment_very_dissatisfied,
                color: Colors.red,
             );
          case 1:
             return Icon(
                Icons.sentiment_dissatisfied,
                color: Colors.redAccent,
             );
          case 2:
             return Icon(
                Icons.sentiment_neutral,
                color: Colors.amber,
             );
          case 3:
             return Icon(
                Icons.sentiment_satisfied,
                color: Colors.lightGreen,
             );
          case 4:
              return Icon(
                Icons.sentiment_very_satisfied,
                color: Colors.green,
              );
       }
    },
    onRatingUpdate: (rating) {
      print(rating);
    },
;

Using Flutter Rating Bar Indicator

Indicator

RatingBarIndicator(
    rating: 2.75,
    itemBuilder: (context, index) => Icon(
         Icons.star,
         color: Colors.amber,
    ),
    itemCount: 5,
    itemSize: 50.0,
    direction: Axis.vertical,
),

Vertical Mode

Vertical

In order to make the indicator scrollable, just use 'physics' property as in the example.

Info

To know more about the available properties, head on to api docs.

Feel Free to request any missing features or report issues here.

License

Copyright (c) 2021 Sarbagya Dhaubanjar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Comments
  • Not Flutter Web Compatible

    Not Flutter Web Compatible

    Pub has marked this package as Web capable, but I get an exception using it with flutter web. Everything is great on Android. But on Web, I tracked the bug to the use of ColorFiltered.

    Making the following change to avoid ColorFiltered, and no other change, avoids the exception (But of course that won't look like a dragging indicator--this isn't a fix, just code to show the problem is isolated to here):

    class _ColorFilter extends StatelessWidget {
      final Widget child;
      final Color color;
    
      _ColorFilter({
        @required this.child,
        @required this.color,
      });
    
      @override
      Widget build(BuildContext context) {
        // ************************************************
        //  The ColorFiltered breaks WEB BUILDS
        //  kIsWeb is a property that returns true for web builds:
        //  import 'package:flutter/foundation.dart';
        // ************************************************
        if (kIsWeb) {
          return child;         // avoid the ColorFiltered wrapper to avoid throwing
        }
        return ColorFiltered(
          colorFilter: ColorFilter.mode(
            color,
            BlendMode.srcATop,
          ),
          child: ColorFiltered(
            colorFilter: ColorFilter.mode(
              Colors.white,
              BlendMode.srcATop,
            ),
            child: child,
          ),
        );
      }
    }
    

    I really like your widget and was happy using it until adding Web support to my app. Please let us know if you think you can implement a similar effect in a web-safe way.

    If there's a way for you to indicate on Pub that this is not web compatible, please do.

    I assume pub has a script that guesses which packages are Web and it misses this ColorFiltered. I'm not sure how to report it. Do you know?

    Edit: Found the relevant dev issues on Flutter github: https://github.com/flutter/flutter/issues/40649 https://github.com/flutter/flutter/issues/47163

    Still looking for the proper way to report it as a pub platform category mistake

    I'm using: flutter_rating_bar: 3.0.0+1 Flutter (Channel dev, v1.13.7, on Microsoft Windows [Version 6.1.7601], locale en-US)

    The exception text is:

    ════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
    The following UnimplementedError was thrown during a scheduler callback:
    UnimplementedError
    
    When the exception was thrown, this was the stack: 
    package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 196:49  throw_
    package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/surface/scene_builder.dart 173:5           pushColorFilter
    package:flutter/src/rendering/layer.dart 1536:26                                                                                                                        addToScene
    package:flutter/src/rendering/layer.dart 442:5                                                                                                                          [_addToSceneWithRetainedRendering]
    package:flutter/src/rendering/layer.dart 1059:14                                                                                                                        addChildrenToScene
    ...
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    opened by WanderingFire2001 7
  • Support for unrated colours

    Support for unrated colours

    I have recently upgraded from 1.1.1 to the latest version and notice a couple of issues :

    a) Placing a RatingBar inside certain containers (i.e a Chip) prevents RatingBar gestures from firing.

    b) It is not possible to have the colour WHITE as a rating :

    image

    When there is a non rating, it is not possible to see this, regardless of the 'alpha' value that can be set.

    opened by MsXam 6
  • No rating property in RatingBar

    No rating property in RatingBar

    There seems to be no rating property in RatingBar widget

    I was trying to make a feature where after user changed rating, I wanted to confirm if he actually wants to change the rating or not.

    In case he says NO, there is no way to change the rating of the RatingBar back to original rating.

    It is available in RatingBarIndicator but it read-only.

    opened by GursheeshSingh 2
  • Unrated Color not working with new update

    Unrated Color not working with new update

    The old versions worked fine with before the item builder. I am returning an amber star as an Icon and setting the unrated color as amber.withalpha(50) however they are still returning the same shade of amber.

    RatingBar( initialRating: 2.75, itemCount: 5, itemSize: 12.0, itemBuilder: (context, _) => Icon(Icons.star, color: Colors.amber), onRatingUpdate: (rating) { print(rating); }, unratedColor: Colors.amber.withAlpha(50), ),

    fixed 
    opened by mrlucky96 2
  • Animation like_button

    Animation like_button

    I think animated button as an optional feature would be great. Reference: https://flutterawesome.com/a-flutter-library-that-allows-you-to-create-a-button-with-animation/

    enhancement 
    opened by goops17 2
  • Request to make read-only

    Request to make read-only

    I've switched between 4 different star ratings components in my Flutter project, and finally this one's my favorite. The thing I'm missing is when I display the submitted ratings, I needed the stars to not be editable there. Wondering if there was a way to disable interactions and make it readOnly.. Thanks.

    enhancement 
    opened by Skquark 2
  • Migrate to null safety

    Migrate to null safety

    opened by nilsreichardt 1
  • Feature request: allow different Icon for background for RatingBarIndicator & transparent unrated Color

    Feature request: allow different Icon for background for RatingBarIndicator & transparent unrated Color

    Pretty common scenario I would say: I want to have the Icons.star_border as my background (say in white) and then fill my star with Icons.star in white also. This is currently not doable, mainly because we cannot separate background and filling Widgets. Another problem is that the unratedColor is a filter, which makes a transparent color impossible. Would a fix be possible?

    Here is my edited version, the merge would need to mix in the unratedColor to only take one of unratedColor or backgroundIcon.

    class RatingBarIndicator extends StatefulWidget {
      /// Defines the rating value for indicator.
      ///
      /// Default = 0.0
      final double rating;
    
      /// {@macro flutterRatingBar.itemCount}
      final int itemCount;
    
      /// {@macro flutterRatingBar.itemSize}
      final double itemSize;
    
      /// {@macro flutterRatingBar.itemPadding}
      final EdgeInsets itemPadding;
    
      /// Controls the scrolling behaviour of rating bar.
      ///
      /// Default is [NeverScrollableScrollPhysics].
      final ScrollPhysics physics;
    
      /// {@macro flutterRatingBar.textDirection}
      final TextDirection textDirection;
    
      /// {@macro flutterRatingBar.itemBuilder}
      final IndexedWidgetBuilder itemBuilder;
    
      /// {@macro flutterRatingBar.direction}
      final Axis direction;
    
      /// {@macro flutterRatingBar.unratedColor}
      final Color unratedColor;
    
      /// {@macro flutterRatingBar.unratedColor}
      final Widget backgroundIcon;
    
      RatingBarIndicator({
        @required this.itemBuilder,
        this.rating = 0.0,
        this.itemCount = 5,
        this.itemSize = 40.0,
        this.itemPadding = const EdgeInsets.all(0.0),
        this.physics = const NeverScrollableScrollPhysics(),
        this.textDirection,
        this.direction = Axis.horizontal,
        this.unratedColor,
        this.backgroundIcon,
      });
    
      @override
      _RatingBarIndicatorState createState() => _RatingBarIndicatorState();
    }
    
    class _RatingBarIndicatorState extends State<RatingBarIndicator> {
      double _ratingFraction = 0.0;
      int _ratingNumber = 0;
      bool _isRTL = false;
    
      @override
      void initState() {
        super.initState();
        _ratingNumber = widget.rating.truncate() + 1;
        _ratingFraction = widget.rating - _ratingNumber + 1;
      }
    
      @override
      Widget build(BuildContext context) {
        _isRTL = (widget.textDirection ?? Directionality.of(context)) ==
            TextDirection.rtl;
        _ratingNumber = widget.rating.truncate() + 1;
        _ratingFraction = widget.rating - _ratingNumber + 1;
        return SingleChildScrollView(
          scrollDirection: widget.direction,
          physics: widget.physics,
          child: widget.direction == Axis.horizontal
              ? Row(
            mainAxisSize: MainAxisSize.min,
            textDirection: _isRTL ? TextDirection.rtl : TextDirection.ltr,
            children: _children(),
          )
              : Column(
            mainAxisSize: MainAxisSize.min,
            textDirection: _isRTL ? TextDirection.rtl : TextDirection.ltr,
            children: _children(),
          ),
        );
      }
    
      List<Widget> _children() {
        return List.generate(
          widget.itemCount,
              (index) {
            if (widget.textDirection != null) {
              if (widget.textDirection == TextDirection.rtl &&
                  Directionality.of(context) != TextDirection.rtl) {
                return Transform(
                  transform: Matrix4.identity()..scale(-1.0, 1.0, 1.0),
                  alignment: Alignment.center,
                  transformHitTests: false,
                  child: _buildItems(index),
                );
              }
            }
            return _buildItems(index);
          },
        );
      }
    
      Widget _buildItems(int index) => Padding(
        padding: widget.itemPadding,
        child: SizedBox(
          width: widget.itemSize,
          height: widget.itemSize,
          child: Stack(
            fit: StackFit.expand,
            children: [
              FittedBox(
                fit: BoxFit.contain,
                child: widget.backgroundIcon,
              ),
              if (index + 1 == _ratingNumber)
                _isRTL
                    ? FittedBox(
                  fit: BoxFit.contain,
                  child: ClipRect(
                    clipper: _IndicatorClipper(
                      ratingFraction: _ratingFraction,
                      rtlMode: _isRTL,
                    ),
                    child: widget.itemBuilder(context, index),
                  ),
                )
                    : FittedBox(
                  fit: BoxFit.contain,
                  child: ClipRect(
                    clipper: _IndicatorClipper(
                      ratingFraction: _ratingFraction,
                    ),
                    child: widget.itemBuilder(context, index),
                  ),
                ),
            ],
          ),
        ),
      );
    }
    
    opened by themadmrj 1
  • Tap to toggle a star

    Tap to toggle a star

    Is there a way to tap on a star to toggle whether its set or not? This is especially useful for toggling the first star, as its slightly intuitive for the user to swipe to the left on it.

    opened by widavies 1
  • CupertinoAlertDialog and CupertinoActionSheet working with error in IOS

    CupertinoAlertDialog and CupertinoActionSheet working with error in IOS

    Hi. Thanks for your awesome package. If the widget contains a rating bar, CupertinoAlert Dialog, and CupertinoActionSheet working with the error in IOS. Android works well. This is an issue screen. Screen Shot 2020-06-23 at 12 01 18 AM Sorry for my screen image. This is a screenshot for the ios showCupertinoAlertDialog method. CupertinoActionSheet as the same as this.

    This is my flutter doctor -v [✓] Flutter (Channel stable, v1.17.4, on Mac OS X 10.15.5 19F101, locale en-CN) • Flutter version 1.17.4 at /Volumes/Work/Tools/5.Flutter/flutter-stable • Framework revision 1ad9baa8b9 (5 days ago), 2020-06-17 14:41:16 -0700 • Engine revision ee76268252 • Dart version 2.8.4

    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/alex/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS (Xcode 11.5) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.5, Build version 11E608c • CocoaPods version 1.9.3

    [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 46.0.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

    [✓] Connected device (1 available) • iPhone SE (2nd generation) • E7FBB639-E762-4501-BB3E-7F7E2233F79C • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)

    • No issues found!

    opened by AkioAlex0817 1
  • Can't change the size of the icons

    Can't change the size of the icons

    I tried to set my own size for the icons but it is not working. here is my code: RatingBar( initialRating: 3.5, minRating: 1, direction: Axis.horizontal, allowHalfRating: true, itemCount: 5, itemPadding: EdgeInsets.symmetric(horizontal: 4.0), itemBuilder: (context, _) => Icon( AppIcons.star, color: AppColors.primary, size: 15.0, ), onRatingUpdate: (rating) { print(rating); }, ),

    opened by Melak12 1
  • The value that I put in initialrating doesn't change when rebuilding.

    The value that I put in initialrating doesn't change when rebuilding.

    RatingBar widget I use: RatingBar( initialRating: user.recommendations[indexOfCurrentSong].rating.toDouble(), minRating: 1, direction: Axis.horizontal, allowHalfRating: false, itemCount: 5, itemPadding: EdgeInsets.symmetric(horizontal: 1), ratingWidget: RatingWidget( empty: Icon( Icons.star, color: Colors.grey, ), half: Icon( Icons.star_half, color: Theme.of(context).colorScheme.primary, ), full: Icon( Icons.star, color: Theme.of(context).colorScheme.primary, )), onRatingUpdate: (rating) { //TO DO: add a rating update to the server!!!! user.recommendations[indexOfCurrentSong].rating = rating.toInt();

                  user.setSongRating(indexOfCurrentSong, rating.toInt());
                  print(rating);
                },
              )
    

    When rebuilding the page with the setState() method, the rating stays the old rating and not the 'new' initialrating.

    opened by NathanDeTroyer 0
  • disable onTap, allow only onDrag

    disable onTap, allow only onDrag

    hello sir. appreciate if you can help me how to disable onTap function, I want only onDrag. Because when I touch the first star to drag, suddenly onTap triggered.

    Thank you.

    opened by FatahZullDev 0
  • When I move the mouse across an empty rating bar the stars jump around

    When I move the mouse across an empty rating bar the stars jump around

    My code:

    RatingBar.builder(
      initialRating: rating,
      minRating: 1,
      direction: Axis.horizontal,
      allowHalfRating: true,
      itemSize: 32,
      itemCount: 5,
      itemPadding:
      EdgeInsets.symmetric(horizontal: 1.0),
      itemBuilder: (context, _) => Icon(
        Icons.star,
        color: Colors.amber,
      ),
      onRatingUpdate: (rating) {
        this.rating = rating;
      },
    )
    

    https://user-images.githubusercontent.com/468337/172999151-33cbc976-053f-493d-b2d7-222944d95995.mov

    opened by schlende 1
Releases(v3.0.0+1)
Owner
Sarbagya Dhaubanjar
Senior Software Engineer at @khalti
Sarbagya Dhaubanjar
Kc - A Simple App Solution for Calculation Fraction (Kali) size of a Lehenga. this is very useful for Fashion designers and tailors. Simple UI with best User Experience.

kc A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is yo

Praveen Suthar 0 Jan 8, 2022
Iosish indicator - 🍎 Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - ?? Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Kim Seung Hwan 2 Apr 1, 2022
Smooth-Page-Indicator-Example-Flutter - A simple example about smooth page indicator in Flutter

Smooth Page Indicator Example - Flutter Screenshots ⚠️ Essential Packages smooth

AmirHossein Bayat 6 Dec 7, 2022
A Smooth rating bar

A Star rating with touch and swipe rate enabled Supports replacing default star icons with desired IconData Supports half rate and full rate (1.0 or 0

Thangmam 146 Sep 15, 2022
A tab bar widget for Flutter 💙 with point indicator.

flutter_point_tab_bar A tab bar widget with point indicator. Demo Usage TabBar( controller: _tabController, indicator: PointTabIndicator(

Hiển Lê 5 Sep 16, 2022
Open source Flutter package, bar indicator made of a series of selected and unselected steps

Step Progress Indicator Open source Flutter package, bar indicator made of a series of selected and unselected steps. Made by Sandro Maglione, check o

Sandro Maglione 138 Dec 15, 2022
A flutter plugin to get facebook deep links and log app events using the latest Facebook SDK to include support for iOS 14

Facebook Sdk For Flutter LinkedIn GitHub facebook_sdk_flutter allows you to fetch deep links, deferred deep links and log facebook app events. This wa

Saad Farhan 23 Dec 17, 2022
This project include all the assets I used in this tutorial

clothes_app_starter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Ruize Nie 11 Jun 29, 2022
This repo provides a starter kit thats include Getx package.

Getx_Starter This repo provides a starter kit thats include Getx package. It includes key-value databases, sample pages, and components which they are

Okan 2 Apr 27, 2022
Stories like in Instagram, each story can include multiple images and videos. Package supports video, titles, preliminary caching.

flutter_instagram_stories A Flutter package for displaying stories just like Whatsapp & Instagram. Built-in groups (multiple stories with one icon), c

Alex Awaik 125 Dec 9, 2022
GetX Architecture for large scale project, This project include - pagination, pull to refresh, localization, network call and advance error handling

GetX Architecture for large scale project, This project include - pagination, pull to refresh, localization, network call and advance error handling

Wai Han Ko 5 Nov 29, 2022
Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Aleyna Eser 2 Oct 25, 2022
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

Ye Myo Aung 1 Apr 20, 2022
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 23 Dec 30, 2022
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

null 9 Nov 27, 2022