Learn How To Create 5 Star Rating Bar In Flutter App

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

Star rating bar is used to get user opinion about application using graphical way. There are mostly 5 Star presenting on mobile screen with 1 to 5 star rating. User can select any given star and according to that the rating will be counted automatically.

Learn How To Create 5 Star Rating Bar In Flutter App

Step 1
We cannot directly remove the time stamp from  5 Star Rating Bar but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code .

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0
  smooth_star_rating: 1.0.3


Step 2
After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. 
flutter pub get

Step 3
 Open your project’s main.dart file and import material.dart and   smooth_star_rating: 1.0.3. dart package.
import 'package:smooth_star_rating/smooth_star_rating.dart';

Step 4
flutter to create Custom Star rating bar widget but using the smooth_star_rating custom component we can easily configure star rating bar widget for our flutter application.
You Can Add Star Rating Bar Code:
class RatingBar extends StatefulWidget {

  RatingBarWidget createState() => RatingBarWidget();

}

class RatingBarWidget extends State {

  double rating = 3.5;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Center(
              child: Column(
                children: <Widget>[

                  Padding(
                      padding: const EdgeInsets.all(12.0),
                     ),
                  SmoothStarRating(
                    allowHalfRating: false,
                    onRatingChanged: (value) {
                      setState(() {
                        rating = value ;
                      });
                    },
                    starCount: 5,
                    rating: rating,
                    size: 40.0,
                    color: Colors.orangeAccent,
                    borderColor: Colors.orangeAccent,
                    spacing:0.0,
                  ),

                  Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Text('Rating = '+'$rating',
                          style: TextStyle(fontSize: 22))),

                ],
              ),
            )));
  }
}

Complete Code For 5 Star Rating Bar In Flutter
main.dart


 

import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              centerTitle: true,
                backgroundColor: Colors.orangeAccent,
                title: Text('Star Rating Bar'),
            ),
            body: Center(
                child: RatingBar()
            )
        )
    );
  }
}

class RatingBar extends StatefulWidget {

  RatingBarWidget createState() => RatingBarWidget();

}

class RatingBarWidget extends State {

  double rating = 3.5;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Center(
              child: Column(
                children: <Widget>[

                  Padding(
                      padding: const EdgeInsets.all(12.0),
                     ),
                  SmoothStarRating(
                    allowHalfRating: false,
                    onRatingChanged: (value) {
                      setState(() {
                        rating = value ;
                      });
                    },
                    starCount: 5,
                    rating: rating,
                    size: 40.0,
                    color: Colors.orangeAccent,
                    borderColor: Colors.orangeAccent,
                    spacing:0.0,
                  ),

                  Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Text('Rating = '+'$rating',
                          style: TextStyle(fontSize: 22))),

                ],
              ),
            )));
  }
}

Related Post