Flutter美观按钮插件sleek_button的使用

A simple but yet customizable button.

安装

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

dependencies:
    sleek_button: <version>

快速开始

以下是一个简单的示例，展示如何使用 SleekButton：

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: SleekButtonStyle.flat(
        color: swatch.primary,
        inverted: true,
        rounded: true,
        size: SleekButtonSize.big,
        context: context,
    ),
    child: const Icon(Icons.format_bold),
)

使用

小部件

示例1：带文字的按钮

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: SleekButtonStyle.flat(
        color: Colors.blue,
        rounded: true,
        context: context,
    ),
    child: const Text('Save'),
)

示例2：带图标的按钮

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: SleekButtonStyle.flat(
        color: Colors.green,
        rounded: true,
        context: context,
    ),
    child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
            const Icon(Icons.check),
            const SizedBox(width: 6),
            const Text('Save'),
        ],
    ),
)

如果直接子元素是 Icon，按钮将呈现为正方形。

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: SleekButtonStyle.flat(
        color: Colors.orange,
        rounded: true,
        context: context,
    ),
    child: const Icon(Icons.check),
)

样式

平面样式（Flat）

SleekButtonStyle.flat(
    context: context,
)

SleekButtonStyle.flat(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.flat(
    inverted: true,
    context: context,
)

SleekButtonStyle.flat(
    rounded: true,
    context: context,
)

SleekButtonStyle.flat(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)

外边框样式（Outlined）

SleekButtonStyle.outlined(
    context: context,
)

SleekButtonStyle.outlined(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.outlined(
    inverted: true,
    context: context,
)

SleekButtonStyle.outlined(
    rounded: true,
    context: context,
)

SleekButtonStyle.outlined(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)

轻量样式（Light）

SleekButtonStyle.light(
    context: context,
)

SleekButtonStyle.light(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.light(
    rounded: true,
    context: context,
)

SleekButtonStyle.light(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)

颜色

如果您提供了一个 color，所有变体（深色、浅色、反转）将通过 derived_colors 包计算。

SleekButtonStyle.flat(
    color: const Color(0xFF),
    context: context,
)

SleekButtonStyle.light(
    color: const Color(0xFFFFC369),
    context: context,
)

SleekButtonStyle.outlined(
    color: const Color(0xFF323232),
    context: context,
)

主题

您可以自定义按钮的默认外观，通过在树中添加一个 SleekButtonTheme。如果树中存在 Theme，它会使用它来推导默认主题。

SleekButtonTheme(
    data: const SleekButtonThemeData(
        padding: 24,
        textStyle: TextStyle(fontSize: 11),
        cornerRadius: 8.0,
        iconTheme: IconThemeData(size: 10),
        fill: Color(0xFFFF0000),
        borderWidth: 2,
    ),
    child: app,
)

感谢

感谢 bulma 框架团队的灵感。

完整示例代码

以下是一个完整的示例代码，展示如何使用 sleek_button 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SleekButtonTheme(
      data: SleekButtonThemeData.fallback(),
      child: MaterialApp(
        title: 'Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SleekButton(
                onTap: () {
                  print('Flat Button Tapped!');
                },
                style: SleekButtonStyle.flat(
                  color: const Color(0xFF5D3BE8),
                  inverted: true,
                  rounded: true,
                  size: SleekButtonSize.normal,
                  context: context,
                ),
                child: const Text('Flat Button'),
              ),
              const SizedBox(height: 20),
              SleekButton(
                onTap: () {
                  print('Outlined Button Tapped!');
                },
                style: SleekButtonStyle.outlined(
                  color: const Color(0xFF323232),
                  rounded: true,
                  context: context,
                ),
                child: const Text('Outlined Button'),
              ),
              const SizedBox(height: 20),
              SleekButton(
                onTap: () {
                  print('Light Button Tapped!');
                },
                style: SleekButtonStyle.light(
                  color: const Color(0xFFFFC369),
                  rounded: true,
                  context: context,
                ),
                child: const Text('Light Button'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}