Flutter缩放按钮功能插件scale_button的使用

scale_button简介

scale_button 是一个为Flutter打造的可定制且易于使用的动画按钮库。它兼容Android、iOS和Web平台，能够为您的应用增添生动的交互效果。

快速开始

添加依赖

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

dependencies:
  ...
  scale_button : "^latest_version"

请将^latest_version替换为scale_button最新版本号。

导入包

在需要使用该插件的Dart文件中导入scale_button包：

import 'package:scale_button/scale_button.dart';

使用示例

下面是一个完整的示例代码，演示了如何在Flutter应用中使用scale_button创建具有缩放效果的按钮：

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

void main() {
  runApp(MaterialApp(home: const MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Scale Button Example"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 基础按钮
          ScaleButton(
            child: Container(
              height: 48.0,
              width: 300.0,
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.all(Radius.circular(24.0)),
              ),
              child: Text(
                "Basic",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          const SizedBox(height: 14.0),
          // 反向缩放的基础按钮
          ScaleButton(
            reverse: true,
            child: Container(
              height: 48.0,
              width: 300.0,
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.all(Radius.circular(24.0)),
              ),
              child: Text(
                "Basic (reverse)",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          const SizedBox(height: 36.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 文本按钮
              const ScaleButton(
                bound: 0.5,
                duration: Duration(milliseconds: 1500),
                child: Text("Text Button"),
              ),
              // 自定义圆形按钮（反向缩放）
              ScaleButton(
                bound: 0.8,
                reverse: true,
                child: Container(
                  height: 100.0,
                  width: 150.0,
                  decoration: const BoxDecoration(
                      color: Colors.orangeAccent, shape: BoxShape.circle),
                  alignment: Alignment.center,
                  child: Text(
                    "Custom Button\n(reverse)",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 11.0,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

此示例展示了四种不同类型的ScaleButton用法：

1. 基础按钮：简单的矩形按钮，点击时会缩小再恢复。
2. 反向缩放的基础按钮：与基础按钮类似，但其动画效果是先放大后恢复。
3. 文本按钮：仅包含文本的按钮，设置了不同的缩放界限和持续时间。
4. 自定义圆形按钮（反向缩放）：一个带有文字的圆形按钮，并且实现了反向缩放效果。

通过这些示例，您可以根据自己的需求调整按钮的外观和行为，以适应您应用的具体场景。希望这个指南对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。