Flutter – Create Rating Star Bar

In the android application, you need to make a rating bar where user rate your craft. For example, GeeksforGeeks also make this feature for tutorials where users can give ratings to the tutorials. A sample video is given below to get an idea about what we are going to do in this article.

How to Use?

FivePointedStar(),

Properties

int count = 5,
double gap = 4,
Size size = const Size(24, 24),
Color color = const Color.fromRGBO(200, 200, 200, 1),
Color selectedColor = const Color.fromRGBO(255, 96, 10, 1),
int defaultSelectedCount = 0,
bool disabled = false,
void Function(int)? onChange,

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the dependency to your pubspec yaml file.

five_pointed_star: ^1.0.3

And import the package 

import 'package:five_pointed_star/five_pointed_star.dart';

Step 3: Import the material package

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
  runApp(RunMyApp());
}

Step 4: Creating  Stateful Widget

Now we have to make a Stateful widget because our application does go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: 
    );
  }
}

Step 5: Creating Scaffold Widget

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. 

home: Scaffold(
  appBar: AppBar(
      title: Text('Five Pointed star'),
  ),
  body: 
),

Step 6: Now use the FivePointedStar widget and gives it parameter like color, on changed

Dart

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

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  int mycount = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Five point star'),
        ),
        body: Center(
            child: Column(
          children: [

            FivePointedStar(
              onChange: (count) {
                setState(() {
                  mycount = count;
                });
              },
            ),
            Text(mycount.toString(),style: TextStyle(fontWeight: FontWeight.bold),),
          ],
        )),
      ),
    );
  }
}

Output: