Button

Introduction

FluttyButton is a versatile button widget that can adapt to many use cases, such as solid buttons, outlined buttons, text buttons, or icon-only buttons. It also supports customizable padding, size variants, corner radii, loading indicators, and icon placements.

Usage

Solid Button

FluttyButton(
  text: 'Submit',
  onPressed: () => print('Pressed'),
  prefixIcon: Icon(Icons.send),
  isLoading: false,
  variant: StyleVariant.solid,
  color: ColorVariant.primary,
  radius: RadiusVariant.large,
  size: SizeVariant.md,
);

Icon-Only Button

FluttyButton(
  icon: Icon(Icons.favorite),
  onPressed: () => print('Icon Tapped'),
  isIconOnly: true,
);

Outlined Style with Custom Padding

FluttyButton(
  text: 'Save',
  onPressed: () => print('Tapped Save'),
  variant: StyleVariant.outlined,
  customColor: Colors.blue,
  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
);

Loading State

FluttyButton(
  text: 'Loading',
  isLoading: true,
  onPressed: () {},
  variant: StyleVariant.solid,
  color: ColorVariant.secondary,
);

Text Button

FluttyButton(
  text: 'Cancel',
  onPressed: () => print('Cancelled'),
  isTextButton: true,
  color: ColorVariant.danger,
);

API

FluttyButton Props

Types and Variants

StyleVariant

Defines the visual style of the button:

• solid (default): Filled background.
• outlined: Transparent with a surrounding border.
• text: Minimalistic text-only style.

SizeVariant

Controls padding and font size:

• sm
• md (default)
• lg
• xl
• xxl

ColorVariant

Specifies semantic color groups often defined in a design system:

• primary (default)
• secondary
• success
• danger
• warning
• info

RadiusVariant

Determines button corner radius:

• sm: Smaller rounded corners.
• md (default): Moderately rounded.
• lg: Large rounded corners.

Notes

• If isLoading is true, user interactions are disabled, and a spinner replaces the button content.
• isIconOnly should be used for minimalistic buttons that only display an icon.
• Customize styles globally via your theme or override specific values using the properties above.