Flutter自定义按钮插件enchant_button的使用

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

Flutter自定义按钮插件enchant_button的使用

通过使用 EnchantButton 包，您可以为 Flutter 应用程序添加平滑且交互式的动画按钮，从而提升您的 Flutter 用户界面。此包提供了多种可定制的按钮，具有引人注目的动画效果，非常适合增强 Flutter 应用程序的用户体验。

预览图

功能

  • RadioButtonBounce: 一种带有闪光动画效果的时尚单选按钮，适用于表单和调查中选项的选择。
  • AddFavoriteButton: 带有心形动画的动态收藏按钮，为应用的喜欢或收藏功能增添了一丝趣味。
  • Neon3DButton: 一种多功能的开关按钮，具有切换动画，非常适合控制设置或在应用中切换状态。

安装

要使用此包，请在项目的 pubspec.yaml 文件中添加 enchant_button 作为依赖项。例如：

dependencies:
    flutter:
        sdk: flutter
    enchant_button: ^1.0.0

使用

在 Dart 代码中导入该包：

import 'package:enchant_button/enchant_button.dart';

在 Flutter UI 中使用提供的按钮：

RadioButtonBounce(
  size: 50,
  onTap: () {
    // 处理点击事件
  },
),

探索包的文档以获取更多高级用法和自定义选项。

示例

查看示例目录中的一个示例 Flutter 应用程序，展示如何使用 EnchantButton 包中的按钮。

许可证

该包根据 MIT 许可证授权，这意味着您可以自由地使用、修改和分发该包，前提是遵循许可证的条款。



版权所有 © 2020, Raveen P. Yatalamaththa ```

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 EnchantButton 包中的不同按钮。

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

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

// 主应用程序小部件。
// 此小部件初始化 Flutter 应用程序并设置根小部件树。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('动画按钮示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // RadioButtonBounce 示例
              RadioButtonBounce(
                size: 50,
                onTap: () {
                  // 处理点击事件
                },
              ),
              const SizedBox(height: 20),
              // AddFavoriteButton 示例
              AddFavoriteButton(
                size: 100,
                onTap: () {
                  // 处理点击事件
                },
              ),
              const SizedBox(height: 20),
              // Neon3DButton 示例
              Neon3DButton(
                icon: Icons.power_settings_new_rounded,
                size: 100,
                onTap: () {
                  // 处理点击事件
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用自定义按钮插件 enchant_button 的一个示例代码。假设你已经将 enchant_button 插件添加到了你的 pubspec.yaml 文件中，并且已经运行了 flutter pub get 命令。

首先，确保你的 pubspec.yaml 文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  enchant_button: ^最新版本号  # 请替换为实际的最新版本号

然后，你可以在你的 Dart 文件中使用 EnchantButton。以下是一个简单的示例，展示了如何自定义并使用 enchant_button：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Enchant Button Demo'),
      ),
      body: Center(
        child: EnchantButton(
          // 按钮的宽度和高度
          width: 200,
          height: 60,
          // 按钮的文本
          buttonText: 'Click Me',
          // 按钮的背景颜色
          buttonColor: Colors.blue,
          // 按钮文本的颜色
          textColor: Colors.white,
          // 按钮边框的颜色
          borderColor: Colors.white,
          // 按钮边框的宽度
          borderWidth: 2.0,
          // 按钮圆角半径
          borderRadius: BorderRadius.circular(30),
          // 按钮点击事件
          onPressed: () {
            // 执行点击事件，例如显示SnackBar
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Button Clicked!'),
                duration: Duration(seconds: 2),
              ),
            );
          },
          // 按钮阴影
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
          // 按钮加载状态（可选）
          isLoading: false,
          // 加载指示器的颜色（可选）
          loadingColor: Colors.white,
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个自定义的 EnchantButton。你可以根据需要调整按钮的各种属性，例如宽度、高度、颜色、文本、边框、圆角、阴影等。

注意：

  • isLoading 属性用于控制按钮是否处于加载状态。如果设置为 true，按钮将显示一个加载指示器而不是文本。
  • loadingColor 属性用于设置加载指示器的颜色。

确保你已经正确安装并导入了 enchant_button 插件，然后运行这个示例代码，你应该能够看到一个自定义样式的按钮，点击它时会显示一个 SnackBar。

回到顶部