sleek_button

A simple but yet customizable button.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    sleek_button: <version>

Quick start

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),
)

Usage

Widget

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: const Text('Save'),,
)

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
            const Icon(Icons.check),
            const SizedBox(width: 6),
            const Text('Save'),
        ],
    ),
)

If the direct child is an Icon, the button will be a square.

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: const Icon(Icons.check),
)

Styles

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,
)

Colors

If you give a color, all variants (dark, light, invert) will be calculated with the help of the derived_colors package.

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

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

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

Theme

You can customize the default appearance of the button by adding a SleekButtonTheme in the tree. If a Theme is in the tree, it will use it tu deduce a default 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,
)

Thanks

Thanks to the bulma framework team for the inspiration.