Flutter按钮组件插件buttons_flutter的使用

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

Flutter按钮组件插件buttons_flutter的使用

开始使用

首先,你需要在你的项目中添加 buttons_flutter 作为依赖项。

pubspec.yaml 文件中添加以下内容:

dependencies:
  buttons_flutter: ^0.0.2+1

然后运行以下命令以获取依赖项:

flutter pub get

现在可以在 Dart 代码中导入并使用它了:

import 'package:buttons_flutter/buttons_flutter.dart';

使用示例

标准按钮

标准按钮是最基本的按钮类型。你可以设置圆角半径、背景颜色等属性。

Button(
  borderRadius: 10, // 设置圆角半径
  bgColor: Colors.blueAccent, // 设置背景颜色
  margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 20), // 设置边距
  onPressed: () {
    // 按钮点击事件
  },
  child: const Text("我是一个按钮"), // 设置按钮文本
)

边框按钮

边框按钮允许你自定义边框样式,如边框颜色等。

BorderButton(
  borderRadius: 10, // 设置圆角半径
  borderColor: Colors.blueAccent, // 设置边框颜色
  margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 20), // 设置边距
  onPressed: () {
    // 按钮点击事件
  },
  child: const Text("我是一个边框按钮"), // 设置按钮文本
),

滑块按钮

滑块按钮需要用户进行滑动操作来触发事件。

SliderButton(
  buttonColor: Colors.blueGrey, // 设置按钮颜色
  alignLabel: Alignment.center, // 设置标签对齐方式
  action: () {
    /// 执行某些操作
    showSnack(context, "滑块按钮动作触发");
  },
  label: const Text(
    "向右滑动",
    style: TextStyle(
      color: Color(0xff4a4a4a),
      fontWeight: FontWeight.w500,
      fontSize: 17,
    ),
  ),
  icon: const Text(
    "x",
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w400,
      fontSize: 44,
    ),
  ),
)

圆角图标按钮

圆角图标按钮用于包含带有圆角边框的图标。

RoundedIconButton(
  borderColor: Colors.red, // 设置边框颜色
  bgColor: Colors.red, // 设置背景颜色
  borderWidth: 0, // 设置边框宽度
  child: const Padding(
    padding: EdgeInsets.all(15.0),
    child: Icon(
      Icons.home, // 图标
      size: 30.0,
      color: Colors.white,
    ),
  ),
  onPressed: () {
    // 按钮点击事件
  },
),

矩形图标按钮

矩形图标按钮用于包含带有矩形边框的图标。

RectIconButton(
  borderColor: Colors.red, // 设置边框颜色
  borderWidth: 3, // 设置边框宽度
  child: const Padding(
    padding: EdgeInsets.all(15.0),
    child: Icon(
      Icons.message, // 图标
      size: 30.0,
      color: Colors.white,
    ),
  ),
  onPressed: () {
    // 按钮点击事件
  },
),

完整示例代码

以下是一个完整的示例代码,展示了如何在 Flutter 应用程序中使用 buttons_flutter 插件。

import 'package:buttons_flutter/buttons_flutter.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: '按钮演示',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const ButtonPage(),
    );
  }
}

class ButtonPage extends StatefulWidget {
  const ButtonPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ButtonPage> createState() => _ButtonPageState();
}

class _ButtonPageState extends State<ButtonPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("按钮演示"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Button(
            borderRadius: 10,
            bgColor: Colors.blueAccent,
            margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            onPressed: () {
              showSnack(context, "我是一个按钮被按下");
            },
            child: const Text("我是一个按钮"),
          ),
          Button(
            borderRadius: 0,
            bgColor: Colors.blueAccent,
            margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            onPressed: () {
              showSnack(context, "我是一个没有圆角的按钮被按下");
            },
            child: const Text("我是一个没有圆角的按钮"),
          ),
          BorderButton(
            borderRadius: 10,
            borderColor: Colors.blueAccent,
            margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            onPressed: () {
              showSnack(context, "我是一个边框按钮被按下");
            },
            child: const Text("我是一个边框按钮"),
          ),
          BorderButton(
            borderRadius: 0,
            borderColor: Colors.blueAccent,
            margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            onPressed: () {
              showSnack(context, "我是一个没有圆角的边框按钮被按下");
            },
            child: const Text("我是一个没有圆角的边框按钮"),
          ),
          const SizedBox(height: 20),
          Center(
            child: SliderButton(
              buttonColor: Colors.blueGrey,
              alignLabel: Alignment.center,
              action: () {
                /// 执行某些操作
                showSnack(context, "滑块按钮动作触发");
              },
              label: const Text(
                "向右滑动",
                style: TextStyle(
                  color: Color(0xff4a4a4a),
                  fontWeight: FontWeight.w500,
                  fontSize: 17,
                ),
              ),
              icon: const Text(
                "x",
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w400,
                  fontSize: 44,
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              RoundedIconButton(
                borderColor: Colors.red,
                borderWidth: 3,
                child: const Padding(
                  padding: EdgeInsets.all(15.0),
                  child: Icon(
                    Icons.message,
                    size: 30.0,
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showSnack(context, "圆角带边框图标按钮被按下");
                },
              ),
              RoundedIconButton(
                borderColor: Colors.red,
                bgColor: Colors.red,
                borderWidth: 0,
                child: const Padding(
                  padding: EdgeInsets.all(15.0),
                  child: Icon(
                    Icons.home,
                    size: 30.0,
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showSnack(context, "圆角不带边框图标按钮被按下");
                },
              ),
              RoundedIconButton(
                borderColor: Colors.red,
                bgColor: Colors.red,
                borderWidth: 0,
                child: const Padding(
                  padding: EdgeInsets.all(15.0),
                  child: Text(
                    "H",
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
                onPressed: () {
                  showSnack(context, "圆角不带边框文字按钮被按下");
                },
              ),
            ],
          ),
          const SizedBox(height: 30),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              RectIconButton(
                borderColor: Colors.red,
                borderWidth: 3,
                child: const Padding(
                  padding: EdgeInsets.all(15.0),
                  child: Icon(
                    Icons.message,
                    size: 30.0,
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showSnack(context, "矩形带边框图标按钮被按下");
                },
              ),
              RectIconButton(
                borderColor: Colors.red,
                borderWidth: 0,
                bgColor: Colors.red,
                child: const Padding(
                  padding: EdgeInsets.all(15.0),
                  child: Icon(
                    Icons.home,
                    size: 30.0,
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showSnack(context, "矩形不带边框图标按钮被按下");
                },
              ),
              RectIconButton(
                borderColor: Colors.red,
                borderWidth: 0,
                bgColor: Colors.amber,
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                  child: Text(
                    "H",
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
                onPressed: () {
                  showSnack(context, "矩形不带边框文字按钮被按下");
                },
              ),
            ],
          )
        ],
      ),
    );
  }

  showSnack(context, text) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(text),
        backgroundColor: Colors.blue,
        duration: const Duration(milliseconds: 500),
      ),
    );
  }
}

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

1 回复

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


buttons_flutter 是一个 Flutter 插件,提供了一系列预定义的按钮样式,可以方便地在你的 Flutter 应用中使用。与 Flutter 自带的按钮相比,buttons_flutter 提供了更多的自定义选项和样式,使得开发者可以快速实现漂亮的按钮。

以下是 buttons_flutter 的基本使用方法:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 buttons_flutter 依赖:

dependencies:
  flutter:
    sdk: flutter
  buttons_flutter: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 buttons_flutter 包:

import 'package:buttons_flutter/buttons_flutter.dart';

3. 使用按钮

buttons_flutter 提供了多种按钮样式,以下是几个常用的按钮组件:

1. RaisedGradientButton

这是一个带有渐变背景的按钮:

RaisedGradientButton(
  child: Text('Gradient Button'),
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
  ),
  onPressed: () {
    print('Gradient Button Pressed');
  },
)

2. FlatGradientButton

这是一个带有渐变背景的扁平按钮:

FlatGradientButton(
  child: Text('Flat Gradient Button'),
  gradient: LinearGradient(
    colors: [Colors.red, Colors.orange],
  ),
  onPressed: () {
    print('Flat Gradient Button Pressed');
  },
)

3. RoundedButton

这是一个圆角按钮:

RoundedButton(
  child: Text('Rounded Button'),
  backgroundColor: Colors.purple,
  onPressed: () {
    print('Rounded Button Pressed');
  },
)

4. OutlineGradientButton

这是一个带有渐变边框的按钮:

OutlineGradientButton(
  child: Text('Outline Gradient Button'),
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
  ),
  onPressed: () {
    print('Outline Gradient Button Pressed');
  },
)

5. IconGradientButton

这是一个带有渐变背景的图标按钮:

IconGradientButton(
  icon: Icons.favorite,
  gradient: LinearGradient(
    colors: [Colors.pink, Colors.purple],
  ),
  onPressed: () {
    print('Icon Gradient Button Pressed');
  },
)
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!