Reviews Slider In Flutter
The animation Is utilized to add enhanced visualizations to inform users that some part of the application’s state has changed. It gives your application a cleaned look that observes the quality of your application to the end-users. Flutter has a generally excellent animation library. I saw the distinctive review expressions animations, and It was one of the magnificent looking associations I at any point saw, Promptly we chose to make it demo.
Flutter is Google’s UI toolkit for building beautiful, Natively compiled mobile, web, and desktop applications from a single code base.
In this blog, we will explore the Reviews Slider In Flutter. We will see how to implement the demo program Reviews Slider with an animated changing smile using the reviews_slider package in your flutter applications.
reviews_slider | Flutter Package
Animated widget with changing smile to collect user review score Add reviews_slider: “^1.0.4” in your pubspec. yaml…pub.dev
Table Of Contents :
Reviews Slider:
Reviews slider is an animated widget with changing smile to gather user survey scores. When the user taps the smile and rotates left to right or right to the left position, then changed the smile shape.
Demo Module :
This demo video shows how to use a reviews slider in a flutter. It shows how the reviews slider will work using the reviews_slider package in your flutter applications. It shows an animated widget with changing smiles when the user rotates smile left to right or right to left positioned and changed the shapes. It will be shown on your device.
Parameters:
There are some parameters of the reviews slider are:
- > onChange: This parameter is used to trigger whenever a pointer has changed the slider’s value and is no longer in contact with the screen.
- > options: This parameter is used for review titles like Good, Bad, Okay, etc.
- > optionStyle: This parameter is used for the Text style of review titles like color, sizes, etc.
- > initialValue: This parameter is used to the init value of the slider. Default value init value is 2.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
reviews_slider:
Step 2: Import
import 'package:reviews_slider/reviews_slider.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called reviews_demo.dart inside the lib folder.
First, we will be creating an integer variable.
int selectedValue1;
We will add a variable on the void onChange1() method. In this method, we will add setState(). In this setState, we will add the selectedValue1 variable that is equal to the value.
void onChange1(int value) {
setState(() {
selectedValue1 = value;
});
}
In the body, we will add a column widget, and mainAxisAlignment was the center, and crossAxisAlignment was started. We will add a text and ReviewSlider(). In the ReviewSlider, we will add optionStyle means Text style of review titles like color, sizes, etc., and onChange means trigger whenever a pointer has changed the slider’s value and is no longer in contact with the screen. Also, we will add text selectedValue1.toString(). It will be displayed on the device.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'How was the service you received?',
style: TextStyle(color: Colors.black,
fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
onChange: onChange1,
),
Text(selectedValue1.toString(),style: TextStyle(color: Colors.red),
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will add more than one slider with a different color of text style.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'How was the service you received?',
style: TextStyle(color: Colors.black,
fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
onChange: onChange1,
),
Text(selectedValue1.toString(),style: TextStyle(color: Colors.red),),
SizedBox(height: 20),
Text(
'Quality of our product?',
style: TextStyle(color: Colors.black, fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
),
onChange: onChange2,
initialValue: 1,
),
Text(selectedValue2.toString(),style: TextStyle(color: Colors.orange)),
SizedBox(height: 20),
Text(
'Price of our product?',
style: TextStyle(color: Colors.black, fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
onChange: onChange3,
initialValue: 3,
),
Text(selectedValue3.toString(),style: TextStyle(color: Colors.black)),
],
),
We will add three reviews slider with different text colors and also different initialValue, and different titles. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:reviews_slider/reviews_slider.dart';
class ReviewsDemo extends StatefulWidget {
@override
_ReviewsDemoState createState() => _ReviewsDemoState();
}
class _ReviewsDemoState extends State<ReviewsDemo> {
int selectedValue1;
int selectedValue2;
int selectedValue3;
void onChange1(int value) {
setState(() {
selectedValue1 = value;
});
}
void onChange2(int value) {
setState(() {
selectedValue2 = value;
});
}
void onChange3(int value) {
setState(() {
selectedValue3 = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[50],
appBar: AppBar(
backgroundColor: Colors.cyan,
title: Text("Flutter Reviews Slider Demo"),
automaticallyImplyLeading: false,
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(left:18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'How was the service you received?',
style: TextStyle(color: Colors.black,
fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
onChange: onChange1,
),
Text(selectedValue1.toString(),style: TextStyle(color: Colors.red),),
SizedBox(height: 20),
Text(
'Quality of our product?',
style: TextStyle(color: Colors.black, fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
),
onChange: onChange2,
initialValue: 1,
),
Text(selectedValue2.toString(),style: TextStyle(color: Colors.orange)),
SizedBox(height: 20),
Text(
'Price of our product?',
style: TextStyle(color: Colors.black, fontSize: 18),
),
SizedBox(height: 20),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
onChange: onChange3,
initialValue: 3,
),
Text(selectedValue3.toString(),style: TextStyle(color: Colors.black)),
],
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Reviews Slider of basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Reviews Slider On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Reviews Slider in your flutter projects. We will show you what the Reviews Slider is?. Some reviews slider parameters, make a demo program for working Reviews Slider, and show a beautifully animated widget with changing smiles when the user rotates smile left to right or right to left positioned. The shapes were changed using the reviews_slider package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Reviews Slider Demo:
flutter-devs/flutter_reviews_slider_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
