Flutter评分动画插件 `simple_animated_rating_bar` 的使用

simple_animated_rating_bar 是一个简单的评分动画插件，可以帮助你在Flutter应用中实现评分系统。它支持多种动画类型、自定义动画曲线和强度等功能。

特性

⭐ 支持8种类型的动画（弹跳、震动、旋转等）。
💫 可选择动画曲线。
💪 可调整动画强度。
🏀 支持任意小部件作为评分指示器。
📚 自定义评分对象数量。
👇 支持点击选择评分。
🌈 包含可切换的级联动画。
🕓 可选择动画时长。

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 simple_animated_rating_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_animated_rating_bar: ^最新版本号

然后运行 flutter pub get 来安装依赖。

2. 声明 `AnimatedRatingBar`

在你的代码中声明一个 AnimatedRatingBar 并设置所需的参数：

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

class MyRatingPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('评分动画示例'),
      ),
      body: Center(
        child: AnimatedRatingBar(
          animationType: ARBAnimationType.rotate,
          emptyWidget: Icon(
            Icons.star_border_rounded,
            size: 48,
            color: Colors.white,
          ),
          fullWidget: Icon(
            Icons.star_rounded,
            size: 48,
            color: Colors.white,
          ),
          onRatingChanged: (value) {
            print('当前评分：$value');
          },
        ),
      ),
    );
  }
}

3. 使用不同的动画效果

你可以根据需要选择不同的动画效果，例如：

震动动画

AnimatedRatingBar(
  animationType: ARBAnimationType.shake,
  emptyWidget: Icon(Icons.star_border_rounded, size: 48, color: Colors.white),
  fullWidget: Icon(Icons.star_rounded, size: 48, color: Colors.white),
  onRatingChanged: (value) {
    print('当前评分：$value');
  },
)

弹跳动画

AnimatedRatingBar(
  animationType: ARBAnimationType.bounce,
  emptyWidget: Icon(Icons.star_border_rounded, size: 48, color: Colors.white),
  fullWidget: Icon(Icons.star_rounded, size: 48, color: Colors.white),
  onRatingChanged: (value) {
    print('当前评分：$value');
  },
)

4. 完整示例 Demo

以下是一个完整的示例，展示了如何在主页面中集成多个评分组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[600],
      appBar: AppBar(
        title: Text('评分动画示例'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // 示例1：旋转动画
          AnimatedRatingBar(
            animationType: ARBAnimationType.rotate,
            emptyWidget: Icon(Icons.star_border_rounded, size: 48, color: Colors.white),
            fullWidget: Icon(Icons.star_rounded, size: 48, color: Colors.white),
            onRatingChanged: (value) {
              print('旋转动画评分：$value');
            },
          ),
          // 示例2：震动动画
          AnimatedRatingBar(
            animationType: ARBAnimationType.shake,
            emptyWidget: Icon(Icons.star_border_rounded, size: 48, color: Colors.white),
            fullWidget: Icon(Icons.star_rounded, size: 48, color: Colors.white),
            onRatingChanged: (value) {
              print('震动动画评分：$value');
            },
          ),
          // 示例3：弹跳动画
          AnimatedRatingBar(
            animationType: ARBAnimationType.bounce,
            emptyWidget: Icon(Icons.star_border_rounded, size: 48, color: Colors.white),
            fullWidget: Icon(Icons.star_rounded, size: 48, color: Colors.white),
            onRatingChanged: (value) {
              print('弹跳动画评分：$value');
            },
          ),
        ],
      ),
    );
  }
}

更多关于Flutter评分动画插件simple_animated_rating_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼•10 小时前

更多关于Flutter评分动画插件simple_animated_rating_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用simple_animated_rating_bar插件的示例代码。simple_animated_rating_bar是一个用于显示评分动画的Flutter插件，非常适合在应用中展示用户评分或评价。

首先，确保你已经在pubspec.yaml文件中添加了simple_animated_rating_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_animated_rating_bar: ^x.y.z  # 请将x.y.z替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以这样使用SimpleAnimatedRatingBar：

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

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

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

class RatingBarScreen extends StatefulWidget {
  @override
  _RatingBarScreenState createState() => _RatingBarScreenState();
}

class _RatingBarScreenState extends State<RatingBarScreen> {
  double _rating = 3.0;

  void _updateRating(double rating) {
    setState(() {
      _rating = rating;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Animated Rating Bar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SimpleAnimatedRatingBar(
              rating: _rating,
              numStars: 5,
              size: 30.0,
              color: Colors.amber,
              borderColor: Colors.grey,
              spacing: 4.0,
              duration: Duration(milliseconds: 300),
              onRatingUpdate: (double rating) => _updateRating(rating),
            ),
            SizedBox(height: 20.0),
            Text(
              'Current Rating: $_rating',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

依赖导入：

import 'package:simple_animated_rating_bar/simple_animated_rating_bar.dart';

创建主应用：

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

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

评分界面：

创建一个有状态的RatingBarScreen组件。
使用SimpleAnimatedRatingBar来显示评分动画。
通过onRatingUpdate回调更新评分值。

class RatingBarScreen extends StatefulWidget {
  @override
  _RatingBarScreenState createState() => _RatingBarScreenState();
}

class _RatingBarScreenState extends State<RatingBarScreen> {
  double _rating = 3.0;

  void _updateRating(double rating) {
    setState(() {
      _rating = rating;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Animated Rating Bar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SimpleAnimatedRatingBar(
              rating: _rating,
              numStars: 5,
              size: 30.0,
              color: Colors.amber,
              borderColor: Colors.grey,
              spacing: 4.0,
              duration: Duration(milliseconds: 300),
              onRatingUpdate: (double rating) => _updateRating(rating),
            ),
            SizedBox(height: 20.0),
            Text(
              'Current Rating: $_rating',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
    );
  }
}

这段代码展示了如何使用simple_animated_rating_bar插件来创建一个带有评分动画的界面，并实时更新评分值。你可以根据需要调整星星的数量、大小、颜色等参数。

Flutter评分动画插件simple_animated_rating_bar的使用

Flutter评分动画插件 simple_animated_rating_bar 的使用

特性