Loading preview...

Installation

flutcn_ui add button

Usage

main.dart

import '../widgets/button.dart';
 
Button.primary(
  text: 'Click me',
  onPressed: () {},
)

Properties

Property	Type	Default	Description
text	String?	null	Label text displayed on the button.
icon	IconData?	null	Leading icon displayed before the text.
onPressed	VoidCallback?	null	Callback triggered on tap. Pass null to disable.
variant	ButtonVariant	primary	Style variant of the button.
size	ButtonSize	md	Size preset controlling height, padding, and font size.
isLoading	bool	false	When true, replaces content with a circular spinner.
isDisabled	bool	false	When true, disables interaction and dims the button.
iconOnly	bool	false	When true, renders only the icon without text.
child	Widget?	null	Custom child widget. Overrides text and icon.
backgroundColor	Color?	—	Override the background color.
foregroundColor	Color?	—	Override the text and icon color.
hoverBackgroundColor	Color?	—	Background color on hover.
pressedBackgroundColor	Color?	—	Background color on press.
disabledBackgroundColor	Color?	—	Background color when disabled.
disabledForegroundColor	Color?	—	Text color when disabled.
loadingIndicatorColor	Color?	—	Color of the loading spinner.
borderColor	Color?	—	Border color (effective with outline or custom variant).
borderWidth	double?	—	Border stroke width.
elevation	double?	0	Shadow elevation.
hoverElevation	double?	—	Elevation on hover.
pressedElevation	double?	—	Elevation on press.
disabledElevation	double?	—	Elevation when disabled.
borderRadius	double?	8.0	Corner radius in logical pixels.
width	double?	—	Fixed width.
height	double?	—	Fixed height.
minWidth	double?	—	Minimum width.
minHeight	double?	—	Minimum height.
fontSize	double?	—	Font size of the label text.
iconSize	double?	—	Size of the icon.
fontWeight	FontWeight?	w600	Font weight of the label text.
padding	EdgeInsetsGeometry?	—	Inner padding override.
animationDuration	Duration?	200ms	Duration of the press animation.
animationCurve	Curve?	easeInOut	Curve of the press animation.
shape	BoxShape?	—	Set to `BoxShape.circle` for a circular button.
gradient	Gradient?	—	Gradient fill (only applied in custom variant).
boxShadow	List<BoxShadow>?	—	Custom box shadow (only applied in custom variant).
loadingSize	double?	—	Size of the loading spinner.
overlayColor	Color?	—	Ripple/overlay color on interaction.
contentAlignment	MainAxisAlignment?	center	Alignment of the row containing icon and text.
textStyle	TextStyle?	—	Full text style override.

Variants

FlutButton provides several variants. Choose the one that best communicates the intent of the action.

Primary

The default variant. Use for the most important action on a screen.

button.dart

Button.primary(
  text: 'Get Started',
  onPressed: () {},
)

Secondary

Use for secondary or supporting actions alongside a primary button.

button.dart

Button.secondary(
  text: 'Cancel',
  onPressed: () {},
)

Outline

A bordered button with a transparent background. Use for less prominent actions.

button.dart

Button.outline(
  text: 'Learn More',
  onPressed: () {},
)

Ghost

No background or border. Useful for toolbar actions and inline controls.

button.dart

Button.ghost(
  text: 'Edit',
  onPressed: () {},
)

Link

Styled like a hyperlink with an underline. Use for navigational actions.

button.dart

Button.link(
  text: 'View docs',
  onPressed: () {},
)

Destructive

Red-toned button for irreversible actions like deleting or removing.

button.dart

Button.destructive(
  text: 'Delete account',
  onPressed: () {},
)

Custom

Full control over colors, shape, gradient, and shadows.

button.dart

Button.custom(
  text: 'Custom',
  backgroundColor: Colors.teal,
  foregroundColor: Colors.white,
  borderRadius: 20,
  onPressed: () {},
)

Sizes

Sm

Height of 32, font size 14. For compact UIs or inline actions.

button.dart

Button.primary(
  text: 'Small',
  size: ButtonSize.sm,
  onPressed: () {},
)

Md

Height of 40, font size 16. The default size.

button.dart

Button.primary(
  text: 'Medium',
  size: ButtonSize.md,
  onPressed: () {},
)

Lg

Height of 48, font size 18. For prominent call-to-action buttons.

button.dart

Button.primary(
  text: 'Large',
  size: ButtonSize.lg,
  onPressed: () {},
)

Icon

Square button at 40×40, designed for icon-only buttons.

button.dart

Button.icon(
  icon: Icons.search,
  onPressed: () {},
)

Custom

Fully control the height, width, font size, and padding.

button.dart

Button.custom(
  text: 'Custom size',
  height: 56,
  width: 200,
  fontSize: 20,
  onPressed: () {},
)

With Icons

Add a leading icon alongside text using the icon parameter.

button.dart

Button.primary(
  text: 'Save',
  icon: Icons.save,
  onPressed: () {},
)

For icon-only buttons, use Button.icon():

button.dart

Button.icon(
  icon: Icons.settings,
  onPressed: () {},
)

Loading State

Set isLoading: true to replace the button content with a spinner. The button remains non-interactive while loading.

button.dart

Button.primary(
  text: 'Submitting...',
  isLoading: true,
  onPressed: () {},
)

Disabled State

Set isDisabled: true to prevent interaction. The button appears dimmed.

button.dart

Button.primary(
  text: 'Not available',
  isDisabled: true,
  onPressed: () {},
)

Gradient Button

Use Button.gradient() to apply a linear or radial gradient fill.

button.dart

Button.gradient(
  text: 'Get Premium',
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.blue],
  ),
  onPressed: () {},
)

Circular Button

Use Button.circular() for a perfectly round icon button.

button.dart

Button.circular(
  icon: Icons.add,
  size: 56,
  onPressed: () {},
)

Helper Class

The Button helper class provides named constructors for each variant and style combination.

button.dart

Button.primary(text: 'Primary', onPressed: () {})
Button.secondary(text: 'Secondary', onPressed: () {})
Button.outline(text: 'Outline', onPressed: () {})
Button.ghost(text: 'Ghost', onPressed: () {})
Button.link(text: 'Link', onPressed: () {})
Button.destructive(text: 'Delete', onPressed: () {})
Button.icon(icon: Icons.settings, onPressed: () {})
Button.gradient(
  text: 'Gradient',
  gradient: LinearGradient(colors: [Colors.pink, Colors.orange]),
  onPressed: () {},
)
Button.circular(icon: Icons.add, size: 50, onPressed: () {})
Button.custom(
  text: 'Custom',
  backgroundColor: Colors.teal,
  foregroundColor: Colors.white,
  onPressed: () {},
)

Button

On this page