CustomButton

A fully-featured, highly customizable button component for Flutter applications with support for multiple states, loading indicators, and flexible styling options.

Features

  • Multiple Visual States:
    • Active/enabled state
    • Disabled state
    • Loading state
  • Flexible Styling:
    • Solid color or gradient background
    • Custom border styling
    • Adjustable shadows
    • Configurable corner radius
  • Content Options:
    • Text with independent enabled/disabled styles
    • Prefix and suffix icons
    • Custom loading indicators
  • Layout Control:
    • Flexible sizing (fixed or expandable)
    • Custom padding and margins
    • Responsive design ready

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_button: ^0.0.2

Basic Usage

CustomButton(
  buttonName: "Submit",
  buttonColor: Colors.blue,
  onPressed: () => print("Button pressed"),
)

Complete Example

Column(
  children: [
    // Primary button
    CustomButton(
      buttonName: "Confirm Order",
      buttonColor: Colors.green,
      buttonTextStyle: TextStyle(color: Colors.white, fontSize: 16),
      buttonHeight: 50,
      onPressed: () => _confirmOrder(),
    ),

    // Disabled button
    CustomButton(
      buttonName: "Disabled Button",
      buttonColor: Colors.blue,
      isEnabled: false,
      disabledButtonColor: Colors.grey,
      disabledButtonTextStyle: TextStyle(color: Colors.white70),
      onPressed: () {},
    ),

    // Loading button
    CustomButton(
      buttonName: "Processing...",
      buttonColor: Colors.purple,
      isLoading: true,
      loadingWidget: CircularProgressIndicator(color: Colors.white),
      onPressed: () {},
    ),

    // Icon button
    CustomButton(
      buttonName: "Share",
      buttonColor: Colors.orange,
      prefixIcon: Icon(Icons.share, color: Colors.white),
      buttonWidth: 200,
      onPressed: () => _shareContent(),
    )
  ],
)

Parameter Reference

Core Properties

Parameter Type Required Description
onPressed Function Yes Action when button is pressed
buttonName String Yes Button text content
buttonColor Color Yes Base button color

Styling Options

Parameter Type Default Description
primaryColor Color? buttonColor Gradient start color
surfaceColor Color? buttonColor Gradient end color
buttonTextStyle TextStyle? null Text style for enabled state
disabledButtonTextStyle TextStyle? null Text style for disabled state
disabledButtonColor Color? Colors.grey[400] Disabled state color
buttonBorderColor Color? buttonColor Border color
buttonCornerRadius double? 0 Border radius

Layout Control

Parameter Type Default Description
buttonHeight double? 45 Fixed button height
buttonWidth double? null Fixed button width
buttonMargin EdgeInsets? EdgeInsets.symmetric(horizontal: 16) Outer margins
buttonPadding EdgeInsets? null Inner padding

Interactive Elements

Parameter Type Default Description
prefixIcon Widget? null Leading icon
suffixIcon Widget? null Trailing icon
loadingWidget Widget? Text("Loading...") Custom loading indicator

Shadow Effects

Parameter Type Default Description
elevation double 2.0 Shadow depth
shadowColor Color Colors.grey Shadow color
shadowBlurRadius double 4.0 Shadow blur amount
shadowOffset Offset Offset(0, 2) Shadow direction

State Management

The button automatically handles these states:

  • Enabled: Normal interactive state
  • Disabled: Visual feedback when isEnabled = false
  • Loading: Shows loading indicator when isLoading = true

Theming Guide

For consistent button styling across your app:

  1. Create a button style constants file:
class AppButtonStyles {
  static const primary = ButtonStyleConfig(
    color: Colors.blue,
    textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
    height: 48,
    radius: 8,
  );
  
  static const secondary = ButtonStyleConfig(
    color: Colors.grey,
    textStyle: TextStyle(color: Colors.black),
  );
}

class ButtonStyleConfig {
  final Color color;
  final TextStyle textStyle;
  final double height;
  final double radius;
  
  const ButtonStyleConfig({
    required this.color,
    required this.textStyle,
    this.height = 44,
    this.radius = 4,
  });
}
  1. Use the preset styles:
CustomButton(
  buttonName: "Primary Action",
  buttonColor: AppButtonStyles.primary.color,
  buttonTextStyle: AppButtonStyles.primary.textStyle,
  buttonHeight: AppButtonStyles.primary.height,
  buttonCornerRadius: AppButtonStyles.primary.radius,
  onPressed: () {},
)

Best Practices

  1. Accessibility:

    • Minimum touch target size of 48x48 pixels
    • Sufficient color contrast (4.5:1 for normal text)
    • Clear visual feedback for all states

  2. Performance:

    • Avoid unnecessary rebuilds
    • Use const constructors for icons
    • Consider caching button configurations

  3. Consistency:

    • Standardize button styles across your app
    • Create reusable button style presets
    • Maintain consistent spacing

Migration Guide

If upgrading from previous versions:

  • primaryColor is now optional (falls back to buttonColor)
  • surfaceColor is now optional (falls back to buttonColor)
  • Loading state now accepts custom widgets
  • Disabled state has more customization options

Libraries

custom_button