Flutter动画图标按钮插件animated_icon_button_flutter的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter动画图标按钮插件animated_icon_button_flutter的使用

安装

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

dependencies:
  flutter:
    sdk: flutter
  animated_icon_button_flutter: any

导入包：

import 'package:animated_icon_button_flutter/animated_icon_button_flutter.dart';

使用

创建一个 AnimatedIconButton 小部件，并传递所需的参数：

AnimatedIconButton(
  text: 'Favorite',
  iconData: Icons.star,
)

自定义

您可以使用以下参数来自定义 AnimatedIconButton 小部件：

/// 点击按钮后出现的颜色
/// 默认值为 Color(0xFFFFD700)。
final Color selectedColor;

/// 再次点击（按钮看起来已禁用）时出现的颜色
/// 默认值为 Color(0xFF708090)。
final Color unSelectedColor;

/// 启用状态下的文本颜色
/// 默认值为 Color(0xFFFFD700)。
final Color textSelectedColor;

/// 禁用状态下的文本颜色
/// 默认值为 Color(0xFF708090)。
final Color textUnselectedColor;

/// 启用状态下的图标颜色
/// 默认值为 Color(0xFFFFD700)。
final Color iconSelectedColor;

/// 禁用状态下的图标颜色
/// 默认值为 Color(0xFF708090)。
final Color iconUnselectedColor;

完整示例代码

以下是完整的示例代码，展示了如何使用 AnimatedIconButton 插件：

import 'package:animated_icon_button_flutter/animated_icon_button_flutter.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 Icon Button',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: AnimatedIconButton(
          text: 'Favorite',
          iconData: Icons.star,
          // 可以自定义其他参数
          selectedColor: Color(0xFFFFD700),
          unSelectedColor: Color(0xFF708090),
          textSelectedColor: Color(0xFFFFD700),
          textUnselectedColor: Color(0xFF708090),
          iconSelectedColor: Color(0xFFFFD700),
          iconUnselectedColor: Color(0xFF708090),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用animated_icon_button_flutter插件的一个代码示例。这个插件允许你创建一个带有动画图标的按钮。首先，你需要确保你的pubspec.yaml文件中已经包含了该插件的依赖项。

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

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

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

  2. 使用插件： 下面是一个完整的Flutter应用示例，展示了如何使用animated_icon_button_flutter插件。

    import 'package:flutter/material.dart';
import 'package:animated_icon_button_flutter/animated_icon_button.dart';

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

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

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

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

  void onIconPressed() {
    setState(() {
      isIconRotated = !isIconRotated;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Icon Button Demo'),
      ),
      body: Center(
        child: AnimatedIconButton(
          icon: AnimatedIcons.menu_arrow, // 选择一个预定义的动画图标
          progress: isIconRotated ? 1.0 : 0.0, // 控制动画进度
          color: Colors.blue,
          size: 50.0,
          onPressed: onIconPressed,
        ),
      ),
    );
  }
}

    在这个示例中：

    • AnimatedIconButton是插件提供的按钮组件。
    • icon属性接受一个AnimatedIcons枚举值，这些枚举值代表预定义的动画图标。
    • progress属性控制动画的进度，当值为0.0时表示初始状态，为1.0时表示动画结束状态。
    • color和size属性分别控制图标的颜色和大小。
    • onPressed回调函数在按钮被点击时调用，这里我们用它来切换isIconRotated状态，从而触发动画。

确保你已经正确安装了插件并运行了上述代码，你应该能看到一个带有动画图标的按钮，当你点击按钮时，图标会进行动画变换。

回到顶部