apptomate_custom_button 0.0.2

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

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,
  });
}

2. 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