Skip to content
A simple but yet customizable button.
Dart HTML Kotlin Swift Objective-C
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
images
lib
test
.gitignore
.metadata
CHANGELOG.md
LICENSE
README.md
pubspec.lock
pubspec.yaml
sleek_button_logo.png

README.md

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.

You can’t perform that action at this time.