Flutter评分动画插件animated_rating_bar_2的使用

Flutter评分动画插件animated_rating_bar_2的使用

Animated Rating Bar

简介

这是一个可自定义的评分动画条形图插件。

开始使用

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  animated_rating_bar_2: <latest_version>

在你的库文件中添加以下导入语句：

import 'package:animated_rating_bar_2/animated_rating_bar.dart';

示例代码

以下是一个简单的示例代码，展示了如何在 Flutter 应用程序中使用 animated_rating_bar_2 插件。

import 'package:animated_rating_bar_2/animated_rating_bar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Rating Bar',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(useMaterial3: true, brightness: Brightness.dark),
      home: const RatingScreen(),
    );
  }
}

class RatingScreen extends StatelessWidget {
  const RatingScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Animated Rating Bar"),
      ),
      body: Center(
        child: AnimatedRatingBar(
          // 设置激活填充颜色
          activeFillColor: Theme.of(context).colorScheme.inversePrimary,
          // 设置边框颜色
          strokeColor: Colors.green,
          // 初始评分数
          initialRating: 0,
          // 设置高度
          height: 60,
          // 设置宽度
          width: MediaQuery.of(context).size.width,
          // 设置动画颜色
          animationColor: Colors.red,
          // 回调函数，当评分更新时触发
          onRatingUpdate: (rating) {
            debugPrint(rating.toString());
          },
        ),
      ),
    );
  }
}