flutter_pannable_rating_bar 2.1.2

Yet another rating bar for Flutter. But this time supported any value, not just full or half, fully customizable as well. Tap and drag gestures are all supported.

example/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double rating1 = 0;
  double rating2 = 0;
  double rating3 = 0;
  double rating4 = 0;

  void updateRating1(double value) {
    setState(() {
      rating1 = value;
    });
  }

  void updateRating2(double value) {
    setState(() {
      rating2 = value;
    });
  }

  void updateRating3(double value) {
    setState(() {
      rating3 = value;
    });
  }

  void updateRating4(double value) {
    setState(() {
      rating4 = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          bottom: const TabBar(
            tabs: [
              Tab(
                text: "Basics",
              ),
              Tab(
                text: "Customized",
              ),
              Tab(
                text: "Multiple",
              ),
              Tab(
                text: "Animation",
              )
            ],
          ),
        ),
        body: TabBarView(
          physics: const NeverScrollableScrollPhysics(),
          children: [
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '$rating1',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  PannableRatingBar(
                    rate: rating1,
                    onChanged: updateRating1,
                    spacing: 20,
                    items: List.generate(
                      5,
                      (index) => const RatingWidget(
                        selectedColor: Colors.yellow,
                        unSelectedColor: Colors.grey,
                        child: Icon(
                          Icons.star,
                          size: 48,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '$rating2',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  PannableRatingBar(
                    rate: rating2,
                    spacing: 20,
                    onChanged: updateRating2,
                    items: const [
                      RatingWidget(
                        selectedColor: Colors.yellow,
                        unSelectedColor: Colors.grey,
                        child: Icon(
                          Icons.star,
                          size: 48,
                        ),
                      ),
                      RatingWidget(
                        selectedColor: Colors.blue,
                        unSelectedColor: Colors.red,
                        child: Icon(
                          Icons.ac_unit,
                          size: 48,
                        ),
                      ),
                      RatingWidget(
                        selectedColor: Colors.purple,
                        unSelectedColor: Colors.amber,
                        child: Icon(
                          Icons.access_time_filled,
                          size: 48,
                        ),
                      ),
                      RatingWidget(
                        selectedColor: Colors.cyanAccent,
                        unSelectedColor: Colors.grey,
                        child: Icon(
                          Icons.abc,
                          size: 48,
                        ),
                      ),
                      RatingWidget(
                        selectedColor: Colors.tealAccent,
                        unSelectedColor: Colors.purple,
                        child: Icon(
                          Icons.accessibility_new_sharp,
                          size: 48,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: Center(
                      child: Text(
                        '$rating3',
                        style: Theme.of(context).textTheme.headline4,
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Expanded(
                    child: PannableRatingBar.builder(
                      rate: rating3,
                      alignment: WrapAlignment.center,
                      spacing: 20,
                      runSpacing: 10,
                      itemCount: 20,
                      direction: Axis.vertical,
                      onChanged: updateRating3,
                      itemBuilder: (context, index) {
                        return const RatingWidget(
                          selectedColor: Colors.yellow,
                          unSelectedColor: Colors.grey,
                          child: Icon(
                            Icons.star,
                            size: 48,
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
            ),
            Center(
              child: PannableRatingBar(
                rate: rating4,
                spacing: 20,
                onChanged: updateRating4,
                items: [
                  RatingWidget(
                    selectedColor: rating4 <= 0.5 ? Colors.red : Colors.green,
                    unSelectedColor: Colors.grey,
                    child: AnimatedSwitcher(
                      duration: const Duration(milliseconds: 300),
                      child: rating4 <= 0.5
                          ? const Icon(
                              Icons.sentiment_very_dissatisfied,
                              key: ValueKey("sad"),
                              size: 100,
                            )
                          : const Icon(
                              Icons.sentiment_satisfied,
                              key: ValueKey("happy"),
                              size: 100,
                            ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}