Buttons Widget

Estimated reading: 7 minutes 24 views

Overview

FlutKit provides a comprehensive set of button widgets designed to cover common and advanced interaction patterns in dashboard and admin interfaces. Each button type shares a consistent API and behavior model, making it easy to switch styles without refactoring business logic.

All button widgets support sizing, icons, loading states, animations, and optional full-width layouts, ensuring visual consistency across your application.

Shared Concepts

Most FlutKit buttons support the following common concepts:

ButtonSize: Controls padding and text size (small, medium, large).
Loading State: Displays a loader and optional loading text while an action is in progress.
Icons: Optional leading and trailing icons to enhance clarity.
Full Width: Expands the button to fill the available horizontal space.
Rounded Style: Enables rounded corners for a softer appearance.

CustomElevatedButton

Description

CustomElevatedButton is the primary call-to-action button. It is visually prominent and should be used for the most important actions on a screen, such as submitting forms or confirming operations.

Constructor

Dart

CustomElevatedButton({
  Key? key,
  required String kText,
  required Color bgColor,
  required Color kTextColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

CustomElevatedButton({
  Key? key,
  required String kText,
  required Color bgColor,
  required Color kTextColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

Common Use Cases

Primary actions (Save, Submit, Confirm)
Main call-to-action buttons

FlatButton

Description

FlatButton is a lightweight button with minimal elevation. It is suitable for secondary actions where less visual emphasis is required.

Constructor

Dart

FlatButton({
  Key? key,
  required String kText,
  required Color bgColor,
  required Color kTextColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool enabled = true,
  String? tooltip,
  FocusNode? focusNode,
  bool autofocus = false,
  void Function()? onLongPress,
  bool isFullWidth = false,
})

FlatButton({
  Key? key,
  required String kText,
  required Color bgColor,
  required Color kTextColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool enabled = true,
  String? tooltip,
  FocusNode? focusNode,
  bool autofocus = false,
  void Function()? onLongPress,
  bool isFullWidth = false,
})

Common Use Cases

Secondary actions
Toolbar actions
Inline buttons

CustomOutlinedButton

Description

CustomOutlinedButton emphasizes actions using an outline instead of a filled background. It works well for alternative or secondary actions.

Constructor

Dart

CustomOutlinedButton({
  Key? key,
  required String kText,
  required Color outlineColor,
  void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

CustomOutlinedButton({
  Key? key,
  required String kText,
  required Color outlineColor,
  void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

Common Use Cases

Cancel actions
Secondary confirmation buttons

SoftButton

Description

SoftButton uses a low-contrast background, making it ideal for subtle actions that should not dominate the interface.

Constructor

Dart

SoftButton({
  Key? key,
  required String kText,
  required Color bgColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

SoftButton({
  Key? key,
  required String kText,
  required Color bgColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

Common Use Cases

Filter buttons
Optional actions

GradientButton

Description

GradientButton provides a visually rich button using gradient backgrounds. It should be used sparingly for special actions.

Constructor

Dart

GradientButton({
  Key? key,
  required String kText,
  required List<Color> bgColor,
  required Color kTextColor,
  required void Function() onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

GradientButton({
  Key? key,
  required String kText,
  required List<Color> bgColor,
  required Color kTextColor,
  required void Function() onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

Common Use Cases

Promotional actions
Highlighted call-to-action

FancyIconButton

Description

FancyIconButton combines text and icons with enhanced styling, suitable for expressive UI elements.

Constructor

Dart

FancyIconButton({
  Key? key,
  required String kText,
  required Color kTextColor,
  required Color bgColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

FancyIconButton({
  Key? key,
  required String kText,
  required Color kTextColor,
  required Color bgColor,
  required void Function()? onPressed,
  ButtonSize size = ButtonSize.medium,
  bool isRounded = false,
  IconData? kLeadingIcon,
  IconData? kTrailingIcon,
  bool isAnimated = false,
  bool isLoading = false,
  Color? loaderColor,
  String loadingText = 'Loading...',
  bool isFullWidth = false,
})

Common Use Cases

Action cards
Feature shortcuts

CustomIconButton

Description

CustomIconButton is an icon-only button optimized for toolbars, tables, and compact actions.

Constructor

Dart

CustomIconButton({
  Key? key,
  required IconData icon,
  ButtonShape shape = ButtonShape.square,
  Color? buttonColor,
  Color? hoverColor,
  Color? iconColor,
  String? tooltipMessage,
  void Function()? onTap,
  bool isBorder = false,
  bool useFontAwesome = false,
  ButtonSize size = ButtonSize.medium,
})

CustomIconButton({
  Key? key,
  required IconData icon,
  ButtonShape shape = ButtonShape.square,
  Color? buttonColor,
  Color? hoverColor,
  Color? iconColor,
  String? tooltipMessage,
  void Function()? onTap,
  bool isBorder = false,
  bool useFontAwesome = false,
  ButtonSize size = ButtonSize.medium,
})

Common Use Cases

Table actions (edit, delete)
Toolbar icons

Best Practices

Use CustomElevatedButton for primary actions only.
Avoid using multiple visually dominant buttons in a single view.
Always provide loading states for async operations.
Keep button labels short and action-oriented.

## Examples

Below are simple, practical examples for each button type. These examples focus on the most common usage patterns and can be copied directly into your project.

CustomElevatedButton

Dart

CustomElevatedButton(
  kText: 'Primary Action',
  bgColor: kPrimaryColor,
  kTextColor: Colors.white,
  onPressed: () {
    // Handle primary action
  },
)

CustomElevatedButton(
  kText: 'Primary Action',
  bgColor: kPrimaryColor,
  kTextColor: Colors.white,
  onPressed: () {
    // Handle primary action
  },
)

FlatButton

Dart

FlatButton(
  kText: 'Flat Action',
  bgColor: kSecondaryColor,
  kTextColor: Colors.white,
  onPressed: () {
    // Handle flat button action
  },
)

FlatButton(
  kText: 'Flat Action',
  bgColor: kSecondaryColor,
  kTextColor: Colors.white,
  onPressed: () {
    // Handle flat button action
  },
)

CustomOutlinedButton

Dart

CustomOutlinedButton(
  kText: 'Outlined Action',
  outlineColor: kPrimaryColor,
  onPressed: () {
    // Handle outlined button action
  },
)

CustomOutlinedButton(
  kText: 'Outlined Action',
  outlineColor: kPrimaryColor,
  onPressed: () {
    // Handle outlined button action
  },
)

SoftButton

Dart

SoftButton(
  kText: 'Soft Action',
  bgColor: kPrimaryColor.withOpacity(0.1),
  onPressed: () {
    // Handle soft button action
  },
)

SoftButton(
  kText: 'Soft Action',
  bgColor: kPrimaryColor.withOpacity(0.1),
  onPressed: () {
    // Handle soft button action
  },
)

GradientButton

Dart

GradientButton(
  kText: 'Gradient Action',
  bgColor: [kPrimaryColor, kSecondaryColor],
  kTextColor: Colors.white,
  onPressed: () {
    // Handle gradient button action
  },
)

GradientButton(
  kText: 'Gradient Action',
  bgColor: [kPrimaryColor, kSecondaryColor],
  kTextColor: Colors.white,
  onPressed: () {
    // Handle gradient button action
  },
)

FancyIconButton

Dart

FancyIconButton(
  kText: 'With Icon',
  bgColor: kInfoColor,
  kTextColor: Colors.white,
  kLeadingIcon: Icons.star,
  onPressed: () {
    // Handle fancy button action
  },
)

FancyIconButton(
  kText: 'With Icon',
  bgColor: kInfoColor,
  kTextColor: Colors.white,
  kLeadingIcon: Icons.star,
  onPressed: () {
    // Handle fancy button action
  },
)

CustomIconButton

Dart

CustomIconButton(
  icon: Icons.settings,
  buttonColor: kPrimaryColor,
  iconColor: Colors.white,
  tooltipMessage: 'Settings',
  onTap: () {
    // Handle icon button tap
  },
)

CustomIconButton(
  icon: Icons.settings,
  buttonColor: kPrimaryColor,
  iconColor: Colors.white,
  tooltipMessage: 'Settings',
  onTap: () {
    // Handle icon button tap
  },
)

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Buttons section. Adjust size, icons, and loading states as needed to match your UX requirements.

Dart

Base UI → Buttons.

Base UI → Buttons.