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  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