Flutter动画图标插件like_animated

Features

动画图标，您可以将其添加到应用程序中，以获得流畅的点赞效果或其他您希望实现动画的图标。

Getting started

将包导入到您的应用程序中

flutter pub add like_animated_icon

Usage

要使用此包，您需要实例化该小部件，如下所示。

LikeEffect(
    iconData: Icons.thumb_up_sharp, // 设置要执行动画的图标
    action: () {},                  // 点击图标时执行的函数
    reverseAction: () {},           // 如果图标已经处于按下状态时，点击执行的反向操作
);

Parameters

以下是 LikeEffect 的参数说明：

iconData: 您希望动画在哪个图标上执行。
action: 图标被按下后要执行的函数。
reverseAction: 如果按下的图标有反向动作，则执行此操作。
optional iconSize: 图标的大小（可选）。
optional initialColor: 图标的初始颜色（可选）。
optional pressedColor: 图标动画完成后最终的颜色（可选）。

完整示例代码

以下是一个完整的示例，展示如何使用 like_animated_icon 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('like_animated_icon 示例'),
        ),
        body: Center(
          child: LikeButtonExample(),
        ),
      ),
    );
  }
}

class LikeButtonExample extends StatefulWidget {
  [@override](/user/override)
  _LikeButtonExampleState createState() => _LikeButtonExampleState();
}

class _LikeButtonExampleState extends State<LikeButtonExample> {
  bool isLiked = false;

  void toggleLike() {
    setState(() {
      isLiked = !isLiked;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LikeEffect(
      iconData: Icons.favorite, // 使用爱心图标
      action: toggleLike,       // 点击后切换状态
      reverseAction: toggleLike, // 反向操作同为切换状态
      iconSize: 50,             // 设置图标大小为50
      initialColor: Colors.grey, // 初始颜色为灰色
      pressedColor: Colors.red,  // 动画完成后变为红色
    );
  }
}

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

caililin 1楼

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

like_animated_icon 是一个用于在 Flutter 应用中实现点赞动画的插件。它提供了一个简单易用的 API，可以轻松地在应用中添加点赞动画效果。以下是如何使用 like_animated_icon 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 like_animated_icon 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  like_animated_icon: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 like_animated_icon 包。

import 'package:like_animated_icon/like_animated_icon.dart';

3. 使用 `LikeAnimatedIcon`

LikeAnimatedIcon 是一个可以显示点赞动画的组件。你可以通过设置 isLiked 属性来控制动画的播放。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLiked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Like Animated Icon Example'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              isLiked = !isLiked;
            });
          },
          child: LikeAnimatedIcon(
            isLiked: isLiked,
            likeIcon: Icons.favorite,
            unlikeIcon: Icons.favorite_border,
            size: 100.0,
            duration: Duration(milliseconds: 500),
            onEnd: () {
              print('Animation ended');
            },
          ),
        ),
      ),
    );
  }
}

4. 参数说明

isLiked: 布尔值，表示当前是否处于点赞状态。当 isLiked 改变时，动画会自动播放。
likeIcon: 点赞状态的图标，通常是一个实心的心形图标。
unlikeIcon: 未点赞状态的图标，通常是一个空心的心形图标。
size: 图标的大小。
duration: 动画的持续时间。
onEnd: 动画结束时的回调函数。

5. 运行应用

现在你可以运行你的 Flutter 应用，点击心形图标时，会播放点赞或取消点赞的动画。

6. 自定义动画

如果你想要更复杂的动画效果，你可以通过 LikeAnimatedIcon 的 animationBuilder 参数来自定义动画。

LikeAnimatedIcon(
  isLiked: isLiked,
  likeIcon: Icons.favorite,
  unlikeIcon: Icons.favorite_border,
  size: 100.0,
  duration: Duration(milliseconds: 500),
  animationBuilder: (context, animation, child) {
    return ScaleTransition(
      scale: Tween<double>(begin: 1.0, end: 1.5).animate(animation),
      child: child,
    );
  },
  onEnd: () {
    print('Animation ended');
  },
)

Flutter动画图标插件like_animated_icon的使用