flutter_pannable_rating_bar 2.7.2+1 copy "flutter_pannable_rating_bar: ^2.7.2+1" to clipboard
flutter_pannable_rating_bar: ^2.7.2+1 copied to clipboard

A versatile and customizable rating bar for Flutter. This bar stands out from others with its ability to select any fractional values. Drag, tap and hover event are all supported.

example/main.dart

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

/// For the [onHover] example, view on Web or desktop related device for best
/// experiences.

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> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          bottom: const TabBar(
            isScrollable: true,
            tabs: [
              Tab(
                text: "Basics",
              ),
              Tab(
                text: "Variety",
              ),
              Tab(
                text: "Customized",
              ),
              Tab(
                text: "Multiple",
              ),
              Tab(
                text: "Animation",
              ),
              Tab(
                text: "Hover",
              )
            ],
          ),
        ),
        body: const TabBarView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            BasicExample(),
            VarietyExample(),
            CustomizedExample(),
            MultipleExample(),
            AnimatedExample(),
            HoverExample(),
          ],
        ),
      ),
    );
  }
}

class BasicExample extends StatefulWidget {
  const BasicExample({Key? key}) : super(key: key);

  @override
  State<BasicExample> createState() => _BasicExampleState();
}

class _BasicExampleState extends State<BasicExample> {
  double rating = 0;

  void updateRating(double value) {
    setState(() {
      rating = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$rating',
            style: Theme.of(context).textTheme.headline4,
          ),
          const SizedBox(
            height: 10,
          ),
          PannableRatingBar(
            rate: rating,
            onChanged: updateRating,
            spacing: 20,
            items: List.generate(
              5,
              (index) => const RatingWidget(
                selectedColor: Colors.yellow,
                unSelectedColor: Colors.grey,
                child: Icon(
                  Icons.star,
                  size: 48,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class VarietyExample extends StatefulWidget {
  const VarietyExample({Key? key}) : super(key: key);

  @override
  State<VarietyExample> createState() => _VarietyExampleState();
}

class _VarietyExampleState extends State<VarietyExample> {
  double rating = 0;

  void updateRating(double value) {
    setState(() {
      rating = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$rating',
              style: Theme.of(context).textTheme.headline4,
            ),
            const SizedBox(
              height: 10,
            ),
            PannableRatingBar(
              rate: rating,
              onChanged: updateRating,
              spacing: 20,
              items: const [
                RatingWidget(
                  selectedColor: Colors.blue,
                  child: Text(
                    "Pannable",
                    style: TextStyle(color: Colors.grey, fontSize: 40),
                  ),
                ),
                RatingWidget(
                  selectedColor: Colors.red,
                  child: Text(
                    "Rating",
                    style: TextStyle(color: Colors.grey, fontSize: 30),
                  ),
                ),
                RatingWidget(
                  selectedColor: Colors.amber,
                  child: Text(
                    "Bar",
                    style: TextStyle(color: Colors.grey, fontSize: 50),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class CustomizedExample extends StatefulWidget {
  const CustomizedExample({Key? key}) : super(key: key);

  @override
  State<CustomizedExample> createState() => _CustomizedExampleState();
}

class _CustomizedExampleState extends State<CustomizedExample> {
  double rating = 0;

  void updateRating(double value) {
    setState(() {
      rating = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$rating',
            style: Theme.of(context).textTheme.headline4,
          ),
          const SizedBox(
            height: 10,
          ),
          PannableRatingBar(
            rate: rating,
            spacing: 20,
            onChanged: updateRating,
            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,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MultipleExample extends StatefulWidget {
  const MultipleExample({Key? key}) : super(key: key);

  @override
  State<MultipleExample> createState() => _MultipleExampleState();
}

class _MultipleExampleState extends State<MultipleExample> {
  double rating = 0;

  void updateRating(double value) {
    setState(() {
      rating = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text(
                '$rating',
                style: Theme.of(context).textTheme.headline4,
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Expanded(
            child: PannableRatingBar.builder(
              rate: rating,
              alignment: WrapAlignment.center,
              spacing: 20,
              runSpacing: 10,
              itemCount: 20,
              direction: Axis.vertical,
              textDirection: TextDirection.rtl,
              verticalDirection: VerticalDirection.up,
              onChanged: updateRating,
              itemBuilder: (context, index) {
                return const RatingWidget(
                  selectedColor: Colors.yellow,
                  unSelectedColor: Colors.grey,
                  child: Icon(
                    Icons.star,
                    size: 48,
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

class AnimatedExample extends StatefulWidget {
  const AnimatedExample({Key? key}) : super(key: key);

  @override
  State<AnimatedExample> createState() => _AnimatedExampleState();
}

class _AnimatedExampleState extends State<AnimatedExample> {
  double rating = 0;

  void updateRating(double value) {
    setState(() {
      rating = double.parse(value.toStringAsFixed(1));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          PannableRatingBar(
            rate: rating,
            spacing: 20,
            onChanged: updateRating,
            items: [
              RatingWidget(
                selectedColor: rating <= 0.5 ? Colors.red : Colors.green,
                unSelectedColor: Colors.grey,
                child: AnimatedSwitcher(
                  duration: const Duration(milliseconds: 300),
                  child: rating <= 0.5
                      ? const Icon(
                          Icons.sentiment_very_dissatisfied,
                          key: ValueKey("sad"),
                          size: 100,
                        )
                      : const Icon(
                          Icons.sentiment_satisfied,
                          key: ValueKey("happy"),
                          size: 100,
                        ),
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 10,
          ),
          Slider(
            value: rating,
            onChanged: updateRating,
            min: 0,
            max: 1,
          ),
        ],
      ),
    );
  }
}

class HoverExample extends StatefulWidget {
  const HoverExample({Key? key}) : super(key: key);

  @override
  State<HoverExample> createState() => _HoverExampleState();
}

class _HoverExampleState extends State<HoverExample> {
  double rating = 0;
  double ratingSet = 0;

  void updateRating(double value) {
    setState(() {
      rating = value;
    });
  }

  void setRating(double value) {
    setState(() {
      ratingSet = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$ratingSet',
            style: Theme.of(context).textTheme.headline4,
          ),
          const SizedBox(
            height: 10,
          ),
          PannableRatingBar(
            rate: rating,
            onChanged: setRating,
            onHover: updateRating,
            spacing: 20,
            items: List.generate(
              5,
              (index) => const RatingWidget(
                selectedColor: Colors.yellow,
                unSelectedColor: Colors.grey,
                child: Icon(
                  Icons.star,
                  size: 48,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
25
likes
140
pub points
81%
popularity

Publisher

verified publishersilentcat.dev

A versatile and customizable rating bar for Flutter. This bar stands out from others with its ability to select any fractional values. Drag, tap and hover event are all supported.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_pannable_rating_bar