Review System in Flutter

In this article, we will implement a review system in the flutter application like you see many times when you purchase a product online from Amazon, Flipkart, or any other company then these companies asked you to give your review regarding the product. Now, this article helps you to guide how you can add a modern review system in your flutter app using dependencies/library. During this implementation we cover these concepts:

• How to add dependencies/libraries in a flutter
• Review Slider working
• Text widget implementation
• Style on text using TextStyle

What is Review Slider?

Nowadays almost every application asks for reviews in the app. Every application follows a different approach to taking user reviews but most of the apps show a star rating bar to collect user reviews. But nowadays star rating system does not attract users but the review slider does. So Basically Review Slider is a package/library in a flutter. It is an animated widget in a flutter that help you to collect reviews from your customer in your app. Review Slider show faces instead of stars this faces slider gives different look to your app as compared to other apps and this functionality increase more chances to give feedback. It works like when the user swiped left to right it changed the smile shape.

Example:

Implementation:

Add review_slider dependency in your pubspec.yaml file.

dependencies:
reviews_slider: ^2.0.0

Import the below package in your file where you want to use :

import 'package:reviews_slider/reviews_slider.dart';

Add Review Slider code in your file

ReviewSlider(
   onChange: (int value) {
     // active value is an int number from 0 to 4, where:
     // 0 is the worst review value and 4 is the best review value
     print(value);
   }),
 ),

Above is the main code which helps you to create a review slider and we need to pass a simple parameter to show the text which is mentioned below.

Parameters (you need to must understand)

• onChange : onChange trigger every time when review slider value changes. It provides value in an integer.
• optionStyle : if you want to style your review titles then you need to use optionStyle and in optionStyle TextStyle() widget to give the style of options.
• initialValue : This Parameter may be very useful for you because it takes an initial value of the slider. For example, if we want to start our slider in two positions then, in this case, we use the initialValue parameter.
• options : if you want to give review titles like terrible, Bad, Okay, Good, and Great then you need to use the options parameter.

Full Code of Review Slider:

Dart

import 'package:flutter/material.dart';
import 'package:reviews_slider/reviews_slider.dart';
// Need this library to implement review slider

void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({
        super.key
    });

    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Review Slider',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: const MyHomePage(title: 'Flutter Review Slider'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    const MyHomePage({
        super.key,
        required this.title
    });

    final String title;

    @override
    State < MyHomePage > createState() => _MyHomePageState();
}

class _MyHomePageState extends State < MyHomePage > {
    int _counter = 0;

    void _incrementCounter() {
        setState(() {
            _counter++;
        });
    }

    // Create List which store string and this strings show below faces.
    List < String > list = ['Terrible', 'Bad', 'Okay', 'Good', 'Great'];


  // Create null variable because in this variable we store selected face text
  String selected_valueoftxt = "";

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            body: Column( // Column used to get full height
                mainAxisAlignment: MainAxisAlignment.center, //  MainAxisAlignment.center helps to center the widget of height
                children: [
                    Center(
                        child: ReviewSlider(
                            initialValue: 3,  // initialValue 3 means our bydefault selected face is 3 which is in list is OKAY
                            options: list, // in options parameter we pass our list option which i mention above
                            onChange: (int value) { // onchange means trigger every time when user slide from one face to other face and it take int parameter using this parameter we find our selected face text in the list
                                selected_valueoftxt = list[value]; // here we store current selected face value
                                setState(() { // setState means it rebuild our app again but nowtime our selected_valueoftxt change
                                });
                            }
                        ),
                    ),
                  // Now we implemented text and in this text our selected face text value show
                    Text(selected_valueoftxt, style: TextStyle(
                        color: Colors.black, // our text color is black
                        fontSize: 20, // fontsize help to increase or decrease our size text
                    ), )
                ],
            ),
        ); // This trailing comma makes auto-formatting nicer for build methods.
    }
}

Output: