Flutter动画按钮插件animbutton的使用

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

Flutter动画按钮插件animbutton的使用

Flutter 动画按钮插件 animbutton 提供了优雅的 UI 交互，包括平滑的动画效果、可定制的样式以及跨平台的无缝集成。

demo

特性

  • 点击时提供视觉反馈
  • 可以高度自定义，包括：
    • 高度
    • 宽度
    • 颜色
    • 动画
    • 文本样式
    • 圆角半径
  • 点击时有多种动画效果

开始使用

在你的 pubspec.yaml 文件中添加最新版本的包（并运行 dart pub get）：

dependencies:
  animbutton: ^latest_version

使用示例

以下是一个简单的示例代码，展示如何使用 animbutton 插件：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimButton(
          buttonColor: Colors.black,
          height: 45.0,
          width: 120.0,
          label: 'Anim Button',
          onPressed: () {
            debugPrint("Button Tapped");
          }),
    );
  }
}

主应用文件

这是主应用文件的完整代码，用于启动应用并加载示例页面：

import 'package:example/src/example.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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Example(),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用animbutton插件来创建一个动画按钮的示例代码。animbutton是一个流行的Flutter插件，用于创建具有动画效果的按钮。

首先，确保你的Flutter项目已经添加了animbutton依赖。你可以在pubspec.yaml文件中添加以下依赖：

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

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

接下来，你可以在你的Dart文件中使用AnimButton来创建一个动画按钮。以下是一个完整的示例代码：

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

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

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

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

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

  void _handlePress() {
    setState(() {
      isPressed = !isPressed;
      // 模拟一些延迟操作，例如网络请求
      Future.delayed(Duration(seconds: 1), () {
        setState(() {
          isPressed = !isPressed;
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimButton Demo'),
      ),
      body: Center(
        child: AnimButton(
          text: isPressed ? 'Loading...' : 'Click Me',
          color: Colors.blue,
          textColor: Colors.white,
          borderRadius: 25.0,
          width: double.infinity,
          height: 50.0,
          onPressed: (bool status) {
            if (!status) {
              _handlePress();
            }
          },
          animType: AnimType.SCALE, // 动画类型，可以是SCALE, FADE, ROTATE等
          animationDuration: Duration(milliseconds: 300), // 动画持续时间
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用AnimButton的动画按钮。按钮的文本在点击时会从“Click Me”变为“Loading…”，并在1秒后恢复。按钮的动画类型设置为SCALE，你可以根据需要更改为FADE、ROTATE等其他动画类型。

这个示例展示了如何设置按钮的基本属性，如文本、颜色、边框半径、宽度、高度以及动画类型和持续时间。同时，通过onPressed回调处理按钮的点击事件，并在点击时触发状态变化。

你可以根据需要进一步自定义按钮的样式和行为。希望这个示例对你有所帮助！

回到顶部