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

nice_button

一个用于在Android和iOS应用中轻松设计美观按钮的Flutter包。享受吧！

安装

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

dependencies:
  ...
  nice_button: ^0.1.7

然后运行flutter pub get以安装此包。

使用示例

首先，导入nice_button.dart：

import 'package:nice_button/nice_button.dart';

普通按钮

普通按钮是最基本的用法。你可以通过设置宽度、圆角半径、文字颜色等来定制按钮。

NiceButton(
    width: 255,       // 设置按钮宽度
    elevation: 8.0,   // 设置阴影高度
    radius: 52.0,     // 设置按钮圆角半径
    text: "Login",    // 设置按钮文本
    background: yourColor, // 设置按钮背景颜色
    onPressed: () {   // 设置点击事件
        print("hello");
    },
),

微型按钮

微型按钮通常用于更小的空间。需要注意的是，微型按钮必须包含一个图标。

NiceButton(
    mini: true,       // 设置为微型按钮
    icon: Icons.home, // 设置图标
    background: yourColor, // 设置按钮背景颜色
    onPressed: () {   // 设置点击事件
        print("hello");
    },
)

渐变按钮

渐变按钮可以通过设置渐变颜色来实现更具视觉冲击力的效果。

var firstColor = Color(0xff5b86e5), secondColor = Color(0xff36d1dc);

NiceButton(
    radius: 40,         // 设置按钮圆角半径
    padding: const EdgeInsets.all(15), // 设置内边距
    text: "Register",   // 设置按钮文本
    icon: Icons.account_box, // 设置图标
    gradientColors: [secondColor, firstColor], // 设置渐变颜色
    onPressed: () {},   // 设置点击事件
)

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用nice_button插件。

import 'package:flutter/material.dart';
import 'package:nice_button/NiceButton.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nice Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  MyHomePageState createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var firstColor = Color(0xff5b86e5), secondColor = Color(0xff36d1dc);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: firstColor,
        title: Text('Nice Button Demo'),
      ),
      body: Material(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                // 普通按钮
                NiceButton(
                  elevation: 8.0,
                  radius: 52.0,
                  text: "Login",
                  background: firstColor,
                  onPressed: () {
                    print("hello");
                  },
                ),
                // 微型按钮
                NiceButton(
                  mini: true,
                  icon: Icons.home,
                  background: firstColor,
                  onPressed: () {
                    print("hello");
                  },
                ),
                // 微型渐变按钮
                NiceButton(
                  elevation: 5,
                  mini: true,
                  icon: Icons.label,
                  gradientColors: [secondColor, firstColor],
                  onPressed: () {},
                ),
                // 渐变按钮
                NiceButton(
                  radius: 40,
                  padding: const EdgeInsets.all(15),
                  text: "Register",
                  icon: Icons.account_box,
                  gradientColors: [secondColor, firstColor],
                  onPressed: () {},
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}