Flutter动画按钮插件animated_button的使用

Animated Button

Animated Button 是一个非常简单且可定制化的动画按钮插件。它提供了简单的动画效果和许多可自定义的属性，如高度、宽度、子组件等。

Getting Started

使用 Animated Button 插件非常简单。首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  animated_button: ^latest_version

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

Simple Example

以下是一个简单的例子，展示了如何使用 Animated Button 创建一个带有动画效果的按钮：

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

void main() => runApp(MyApp());

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

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Button Demo')),
      body: Center(
        child: AnimatedButton(
          child: Text(
            'Simple button',
            style: TextStyle(
              fontSize: 22,
              color: Colors.white,
              fontWeight: FontWeight.w500,
            ),
          ),
          onPressed: () {},
        ),
      ),
    );
  }
}

Button Attributes

Animated Button 提供了多个可配置的属性来满足不同的需求：

child: 子组件，可以是 Text、Row、Column 等。
onPressed: 按钮点击事件的回调函数。
duration: 动画持续时间，默认为70毫秒。
height: 按钮的高度，默认为64。
width: 按钮的宽度，默认为200。
enabled: 是否启用按钮，默认为 true。
shadowDegree: 阴影程度，默认为 ShadowDegree.dark。
color: 按钮的颜色。

例如，创建一个带有更多自定义属性的按钮：

AnimatedButton(
  child: Text(
    'Customized button',
    style: TextStyle(
      fontSize: 22,
      color: Colors.white,
      fontWeight: FontWeight.w500,
    ),
  ),
  onPressed: () {},
  duration: 400, // 更慢的动画
  height: 80,
  width: 300,
  enabled: true,
  shadowDegree: ShadowDegree.light,
  color: Colors.green,
)

More Examples

以下是更多使用 Animated Button 的示例代码，包括不同类型的按钮和交互效果：

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

void main() => runApp(MyApp());

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

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Button Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 20),
            AnimatedButton(
              child: Text(
                'Simple button',
                style: TextStyle(
                  fontSize: 22,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              color: Colors.blue,
              onPressed: () {},
              enabled: true,
              shadowDegree: ShadowDegree.light,
            ),
            AnimatedButton(
              child: Text(
                'Slow animation',
                style: TextStyle(
                  fontSize: 22,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              color: Colors.green,
              onPressed: () {},
              enabled: true,
              shadowDegree: ShadowDegree.light,
              duration: 400,
            ),
            AnimatedButton(
              child: Text(
                'Navigate to another page',
                style: TextStyle(
                  fontSize: 22,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => AnotherPage()),
                );
              },
              width: 300,
              color: Colors.redAccent,
              shadowDegree: ShadowDegree.dark,
              enabled: true,
            ),
            AnimatedButton(
              child: Text(
                'I\'m disabled',
                style: TextStyle(
                  fontSize: 22,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              onPressed: () {
                print('you won\'t see this message because button is disabled!');
              },
              color: Colors.green,
              enabled: false,
            ),
            AnimatedButton(
              child: Text(
                'Custom height',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              onPressed: () {},
              height: 40,
              shadowDegree: ShadowDegree.dark,
              color: Colors.indigo,
            ),
            AnimatedButton(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.add_shopping_cart,
                      color: Colors.white,
                    ),
                    SizedBox(width: 6),
                    Text(
                      'Add to Cart',
                      style: TextStyle(
                        fontSize: 22,
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
              ),
              onPressed: () {},
              shadowDegree: ShadowDegree.light,
              color: Colors.green,
            ),
            AnimatedButton(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Loading...',
                      style: TextStyle(
                        fontSize: 22,
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(width: 10),
                    SizedBox(
                      width: 30,
                      height: 30,
                      child: CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                      ),
                    )
                  ],
                ),
              ),
              onPressed: () {},
              shadowDegree: ShadowDegree.light,
              color: Colors.amber[400],
            ),
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

class AnotherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Another Page')),
      body: Center(child: Text('This is another page!')),
    );
  }
}

License

Animated Button 插件采用 MIT License 许可证。

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

htzhanglong 1楼•2 天前

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

当然，下面是一个关于如何在Flutter项目中使用animated_button插件的示例代码。这个插件允许你创建带有动画效果的按钮，以提升用户界面的交互性。

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

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

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

接下来，在你的Flutter项目中，你可以按照以下方式使用AnimatedButton：

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

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

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

class AnimatedButtonDemo extends StatefulWidget {
  @override
  _AnimatedButtonDemoState createState() => _AnimatedButtonDemoState();
}

class _AnimatedButtonDemoState extends State<AnimatedButtonDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Button Demo'),
      ),
      body: Center(
        child: AnimatedButton(
          width: 200,
          height: 50,
          child: Text(
            'Click Me',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          backgroundColor: Colors.blue,
          borderRadius: 25,
          onPressed: () {
            // 你可以在这里添加按钮点击后的逻辑
            print('Button clicked!');
          },
          animationType: AnimatedButtonType.borderRadius,
          duration: 300,
        ),
      ),
    );
  }
}

在这个示例中：

AnimatedButton的width和height属性定义了按钮的宽度和高度。
child属性定义了按钮内部的文本和样式。
backgroundColor属性设置了按钮的背景颜色。
borderRadius属性设置了按钮的圆角半径。
onPressed是一个回调函数，当按钮被点击时会执行。
animationType属性定义了动画的类型，这里使用的是AnimatedButtonType.borderRadius。animated_button插件提供了多种动画类型，你可以根据需求选择。
duration属性定义了动画的持续时间（以毫秒为单位）。

你可以根据项目的需求调整这些属性，以实现不同的动画效果和按钮样式。希望这个示例能帮助你更好地理解和使用animated_button插件。