Rating Bar as the name suggests is used to rate content inside the application. More or less all applications use them either to gate user feedback on their application or to get a rating for content hosted by the application. Applications like IMDB use them to rate movies and Television series where apps like and Uber use them to get feedback on their services from the customer.
In this article we will build a simple app with the following features:
- A horizontal Rating bar
- A switch to make all rating bars above go right to left
- A switch to make the rating bars vertical
- Three different modes to change the Icon of the first rating bar
To build the above application follow the below steps:
- Add the dependency to the pubspec.yaml file
- Import the dependency to the main.dart file
- Use the StatefulWidget to give structure to the application
- Add the vertical rating bar
- Add switch to change the alignment of the rating bars from right to left (RTL)
- Add a switch to change the alignment of the rating bar from horizontal to vertical
- Add 3 different modes that change the UI Icons.
Adding the Dependency:
To add the dependency to the pubspec.yaml file the following image can be followed:
Importing the Dependency:
To import the flutter_rating_bar dependency to the main.dart file, use the following:
Structuring the application:
A StatefulWidget can be used to give the app an appbar and a body to hold content as shown below:
Designing a vertical rating Bar:
A simple rating bar can be called upon from the flutter_rating_bar package by calling the RatingBar widget as shown below:
Adding A RTL switch:
At this stage, we will add a switch that can change the alignment of the rating bar from left to right, to right to left. It can be done by using the MainAxisAlignment as MainAxisAlignment.center and calling the _isRTL mode as shown below:
Adding a Vertical alignment switch:
At this stage, we will add a switch that can change the alignment of the rating bar from left to right, to right to left. It can be done by using the MainAxisAlignment as MainAxisAlignment.center and calling the _isVertical mode as shown below:
Adding Modes to the Rating bar:
In this application, we will be adding 3 Mode and on the selection of each mode the rating bar Icon will change. We will be using the switch() function to assign the cases to modes and assign icons to the same as shown below:
Complete Source Code:
- Bottom Navigation Bar in Android
- How to change the color of Action Bar in an Android App?
- Different ways to hide Action bar in Android with Examples
- How to Create a Unlock Slide-Bar in Android?
- How to Add a Floating Action Button to Bottom Navigation Bar in Android?
- Getting Started with Cross-Platform Mobile Application using Flutter
- Difference between React Native and Flutter
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Routes and Navigator in Flutter
- Container class in Flutter
- Difference Between Stateless and Stateful Widget in Flutter
- Rive animations in Flutter
- ProgressIndicator in Flutter
- Flutter - Stateful vs Stateless Widgets
- Listview.builder in Flutter
- Splash Screen in Flutter
- How to Add images in Flutter App?
- Raised Button widget in Flutter
- Fluttertoast in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.