Flutter动画图标插件rive_animated_icon的使用

简介

rive_animated_icon 是一个Flutter插件，提供了50多个由Rive动画制作的图标。这些图标可以被定制以适应您的偏好。它包括了riveIcon类型、onTap、color等参数，为用户提供了一定程度上的控制。

查看项目

Icons Sample

示例代码

以下是一个完整的示例demo，展示了如何在Flutter应用中使用rive_animated_icon插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rive Animated Icons',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
          child: SingleChildScrollView(
        child: Center(
          child: Wrap(
              alignment: WrapAlignment.start,
              children: RiveIcon.values
                  .map((RiveIcon e) => Padding(
                        padding: const EdgeInsets.all(5.0),
                        child: Column(
                          children: [
                            const SizedBox(
                              height: 10,
                            ),
                            RiveAnimatedIcon(
                              riveIcon: e,
                              width: 40,
                              height: 40,
                              strokeWidth: 3,
                              loopAnimation: true,
                              onTap: () {
                                debugPrint('tapped');
                              },
                              onHover: (value) {
                                debugPrint('value is $value');
                              },
                              color: Colors.green,
                            ),
                          ],
                        ),
                      ))
                  .toList()),
        ),
      )),
    );
  }
}

必要参数

riveIcon

此参数用于定义来自RiveIcon枚举的图标类型。

可选参数

width

设置图标的宽度。

height

设置图标的高度。

color

设置图标的颜色。

loopAnimation

当此参数设置为true时，图标的动画将循环播放。

onTap

用户点击图标时触发的回调函数。

onHover

鼠标悬停在图标上时触发的回调函数。

splashColor

设置图标点击时的水波纹颜色。

strokeWidth

设置图标的描边宽度。

splashFactory

设置图标的水波纹效果工厂。

mouseCursor

设置鼠标悬停在图标上时的鼠标样式。

enableAbsorbPointer

当此参数设置为true时，禁用图标的所有交互功能。

动画图标描边宽度示例

最佳实践

• 如果Rive动画设置为循环，并且滚动到屏幕外，您可以禁用循环以停止动画并节省资源。同样，当动画回到视图内时，可以重新启用循环。

许可证

Rive Animated Icons遵循MIT许可证，详情请参阅 LICENSE.

动画致谢

所有可用的图标都是在Rive中动画化的，并来源于Rive社区文件。特别感谢所有的动画师！

• @drawsgood
• @Daniyar
• @nikkieke001

维护者

• Nikki Eke

以上是关于rive_animated_icon插件的详细介绍和使用方法，希望对您有所帮助！