Flutter动画按钮插件animation_button的使用

Flutter动画按钮插件animation_button的使用

Static Badge Static Badge

animation_button 是一个用于创建具有高亮背景动画效果的可定制 Flutter 小部件的包。

开始使用

要使用此插件，需要在 pubspec.yaml 文件中添加最新版本的 animation_button 作为依赖项。

平台支持

此 Flutter 插件支持以下平台：

平台 支持状态 备注
Android ✅ 支持 兼容 Android 4.1+
iOS ✅ 支持 需要 iOS 9.0 或更高版本
Web ✅ 支持 在 Web 上完全可用
macOS ✅ 支持 需要 macOS 10.11 或更高版本
Windows ✅ 支持 需要 Windows 10 或更高版本
Linux ✅ 支持 需要 GTK 3.10 或更高版本

支持状态

  • ✅ 支持：该平台完全支持并已测试。

按钮参数及其描述

数据类型 参数名 是否必需 默认值 描述
函数 onPressed 是 – 当小部件被按下时调用的函数
字符串 title 是 – 按钮的标题
double buttonBorderRadius 否 50.0 按钮边框的半径
颜色 buttonBackgroundColor 否 Color(0xFFCCD5AE) 按钮的背景颜色
小部件 iconNextTitle 否 SizedBox.shrink() 添加在按钮标题旁边的部件
double initialWidth 否 250.0 按钮的宽度
double initialHeight 否 50.0 按钮的高度
时长 animatedContainerDuration 是 milliseconds: 300 动画容器的时长

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      showSemanticsDebugger: false,
      title: 'Flutter Demo for Animated Button',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo '),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: AnimationButton(
        animatedContainerDuration: const Duration(milliseconds: 300), // 动画时长为300毫秒
        onPressed: () {
          debugPrint('AppBarTitle ${widget.title}'); // 打印按钮标题
        },
        title: 'Subscribe now', // 设置按钮标题
      )),
    );
  }
}

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

1 回复

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


animation_button 是一个用于 Flutter 的动画按钮插件，它允许你创建带有各种动画效果的按钮。这个插件可以帮助你轻松地实现按钮的点击动画、加载动画等效果。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  animation_button: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本使用

以下是一个简单的使用 animation_button 插件的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animation Button Example'),
        ),
        body: Center(
          child: AnimationButton(
            child: Text('Click Me'),
            onPressed: () {
              // 处理按钮点击事件
              print('Button Clicked!');
            },
          ),
        ),
      ),
    );
  }
}

自定义动画效果

animation_button 提供了多种动画效果，你可以通过设置 animationType 属性来选择不同的动画类型。例如：

AnimationButton(
  child: Text('Click Me'),
  onPressed: () {
    print('Button Clicked!');
  },
  animationType: AnimationType.elastic,  // 使用弹性动画
)

其他可选参数

animation_button 还提供了其他一些可选的参数，用于进一步自定义按钮的行为和外观：

  • duration: 动画的持续时间。
  • scale: 按钮的缩放比例。
  • borderRadius: 按钮的圆角半径。
  • color: 按钮的背景颜色。
  • disabledColor: 按钮禁用时的背景颜色。
  • padding: 按钮的内边距。
  • elevation: 按钮的阴影高度。

示例代码

以下是一个更完整的示例，展示了如何使用 animation_button 插件的多个功能：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animation Button Example'),
        ),
        body: Center(
          child: AnimationButton(
            child: Text('Click Me'),
            onPressed: () {
              print('Button Clicked!');
            },
            animationType: AnimationType.elastic,
            duration: Duration(milliseconds: 500),
            scale: 1.2,
            borderRadius: BorderRadius.circular(10),
            color: Colors.blue,
            disabledColor: Colors.grey,
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            elevation: 5,
          ),
        ),
      ),
    );
  }
}
回到顶部