Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
sleek_button cover
Package detailsv0.2.0

sleek_button

A simple but yet customizable button.

pub.dev API documentation Source code
30-day downloads
13
Likes
19
Pub points
40

Install package

flutter pub add sleek_button

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Sleek Button is a lightweight, customizable Flutter widget designed to create elegant and modern buttons with minimal effort. It offers a clean API for styling buttons with various effects, including animations, gradients, and shadows. Ideal for developers seeking a simple yet visually appealing button component without heavy dependencies. The package supports customization of size, color, shape, and ripple effects, making it suitable for both basic and advanced UI needs. It integrates seamlessly into any Flutter project.

Use cases

  • Creating styled buttons in mobile apps
  • Adding animated button effects
  • Building forms with attractive input controls
  • Designing interactive UI elements
  • Implementing custom button themes
  • Enhancing user interface aesthetics

Key features

  • Highly customizable appearance
  • Built-in animation and ripple effects
  • Support for gradients and shadows
  • Simple and intuitive API
  • Lightweight and fast performance
  • Easy integration with existing Flutter projects

Suitable for

  • Flutter beginners looking for easy-to-use widgets
  • Developers wanting quick button styling
  • Projects requiring polished UI components
  • Apps focused on visual appeal and interactivity
  • Teams aiming for consistent button design across screens

Considerations

  • Limited to button-specific functionality
  • No built-in support for complex states like loading or disabled
  • May require additional code for advanced interactions
  • Not ideal for highly dynamic or data-driven button logic

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Button & Progress Button

Dependencies

Dependency list 3 items

Source repository

Projects using this package

No data available yet.