Flutter Reviews Slider Example
In this article, we are going to implement flutter reviews slider in our apps using reviews_slider flutter package. You can also check out flutter slider related articles.
Nowadays Reviews or Feedback screen is most important in mobile applications if you provide some service or product. In this flutter example, we will implement flutter reviews screen with animated changing smile to rate food product and delivery service. User can slide left to right or right to left shape to give feedback.
Flutter Reviews Slider widget has many properties. options property is used to review product or service with Terrible, Bad, Okay, Good or Great value. We can also customize review title using optionStyle property.
initialValue attribute is used to set initial value of our rating slider. onChange property is used to detect and return rating value when user slides rating shape from left to right or right to left.
Add required package in your pubspec.yaml file
Flutter Reviews Slider
import ‘package:reviews_slider/reviews_slider.dart’;
class MyReviewsSliderScreen extends StatefulWidget {
@override
_MyReviewsSliderScreenState createState() => _MyReviewsSliderScreenState();
}
class _MyReviewsSliderScreenState extends State<MyReviewsSliderScreen> {
int selectedValue1;
int selectedValue2;
int selectedValue3;
void onChangeValue1(int value) {
setState(() {
selectedValue1 = value;
});
}
void onChangeValue2(int value) {
setState(() {
selectedValue2 = value;
});
}
void onChangeValue3(int value) {
setState(() {
selectedValue3 = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Reviews Slider Sample’),),
body: Container(
margin: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Text(
‘Rate your meal from Dominos Pizza’,
style: TextStyle(color: Colors.black, fontSize: 20),
),
SizedBox(height: 25),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.deepOrangeAccent,
fontWeight: FontWeight.bold,
),
onChange: onChangeValue1,
initialValue: 2,
),
SizedBox(height: 25),
Text(
‘How was the delivery?’,
style: TextStyle(color: Colors.black, fontSize: 20),
),
SizedBox(height: 25),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.orangeAccent,
fontWeight: FontWeight.bold,
),
onChange: onChangeValue2,
initialValue: 1,
),
SizedBox(height: 25),
Text(
‘Give some feedback for our app’,
style: TextStyle(color: Colors.black, fontSize: 20),
),
SizedBox(height: 25),
ReviewSlider(
optionStyle: TextStyle(
color: Colors.pinkAccent,
fontWeight: FontWeight.bold,
),
onChange: onChangeValue3,
initialValue: 3,
),
],
),
));
}
}
Pingback: Setting Intro Slider in Flutter Applications - CodingWithDhrumil