easy_buttons

开始使用

ClassFunc 首个包库

demo_easy_buttons

使用方法

安装

在 pubspec.yaml 文件中添加依赖：

flutter pub add easy_buttons

dependencies:
  easy_buttons: ^1.0.8

引入并使用插件

首先，在 Dart 文件中引入 easy_buttons 包：

import 'package:easy_buttons/easy_buttons.dart';

然后，你可以在你的 Flutter 应用程序中使用 EasyButton 小部件。以下是一个完整的示例，展示了如何创建一个带有图标和文字的按钮，并在点击时显示一个对话框。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Buttons Demo'),
      ),
      body: Center(
        child: EasyButton(
          title: '测试新包',
          svgPicture: SvgPicture.asset('assets/images/ic_done_bottom.svg', width: 30, height: 32),
          onTap: () => showDialog<String>(
            context: context,
            builder: (BuildContext context) => AlertDialog(
              title: const Text('对话框标题'),
              content: const Text('对话框描述'),
              actions: <Widget>[
                TextButton(
                  onPressed: () => Navigator.pop(context, '取消'),
                  child: const Text('取消'),
                ),
                TextButton(
                  onPressed: () => Navigator.pop(context, '确定'),
                  child: const Text('确定'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个 EasyButton 小部件，它包含一个标题和一个 SVG 图标。当用户点击按钮时，会弹出一个对话框，其中包含标题和描述文本，以及两个按钮（取消和确定）。

确保在项目的 assets 目录中添加了 ic_done_bottom.svg 图标文件，并在 pubspec.yaml 中正确配置了资源路径：

flutter:
  assets:
    - assets/images/ic_done_bottom.svg

这样，你就可以在 Flutter 应用程序中使用 easy_buttons 插件来快速创建带有图标的按钮了。

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

songsunli 1楼•1 个月前

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

easy_buttons 是一个用于 Flutter 的插件，它提供了一系列预定义的、易于使用的按钮样式和功能，可以帮助开发者快速构建漂亮的用户界面。这个插件的目标是简化按钮的创建和样式配置过程。

安装

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

dependencies:
  easy_buttons: ^2.0.0

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

导入

在你的 Dart 文件中导入 easy_buttons：

import 'package:easy_buttons/easy_buttons.dart';

使用示例

以下是 easy_buttons 的一些常见用法示例：

1. 基本按钮

EasyButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: 'Click Me',
);

2. 带有图标的按钮

EasyButton.icon(
  onPressed: () {
    // 处理按钮点击事件
  },
  icon: Icon(Icons.thumb_up),
  text: 'Like',
);

3. 不同样式的按钮

easy_buttons 提供了多种预定义的按钮样式，例如：

EasyButton.success：成功样式（绿色）
EasyButton.primary：主样式（蓝色）
EasyButton.danger：危险样式（红色）
EasyButton.warning：警告样式（黄色）

EasyButton.success(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: 'Success',
);

EasyButton.danger(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: 'Danger',
);

4. 自定义样式的按钮

你可以通过 ButtonStyle 来自定义按钮的样式：

EasyButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: 'Custom Button',
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.orange),
    padding: MaterialStateProperty.all(EdgeInsets.all(20)),
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 18)),
  ),
);

5. 禁用按钮

你可以通过 enabled 参数来控制按钮是否可用：

EasyButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  text: 'Disabled Button',
  enabled: false,
);