May

Flutter Rating

Flutter Rating:

In this tutorial, we are going to learn the Flutter Star Rating system. whenever we use online services they will ask us to give a rating about their services as feedback this will help them to improve their services and increase their customers and their businesses. for this purpose, the rating system is used.

Creating Flutter Star Rating:

Follow the below procedure to create Flutter Star Rating System.

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_rating: ^0.0.2

Install the package:

You can install the package from the command line using the below code with flutter as shown.

$ flutter packages get

Importing the Package:

We know that After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_rating/flutter_rating.dart';

Complete Example Code for Flutter Star Rating App:

Copy and paste the below code into your main.dart file

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Test(),
);
}
}

class Test extends StatefulWidget {
@override
_TestState createState() => new _TestState();
}

class _TestState extends State {
double rating = 3.5;
int starCount = 6;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Star Rating"),
),
body:
new Column(
children: [
new Padding(
padding: new EdgeInsets.only(
top: 50.0,
bottom: 50.0,
),
child: new StarRating(
size: 25.0,
rating: rating,
color: Colors.orange,
borderColor: Colors.grey,
starCount: starCount,
onRatingChanged: (rating) => setState(
() {
this.rating = rating;
},
),
),
),
new Text(
"Your rating is: $rating",
style: new TextStyle(fontSize: 30.0),
),
],
),
);
}
}
© 2019 GitHub, Inc.

Congratulations You Have Learned Flutter Star Rating System….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext