ButtonAppi

A highly customizable button widget with support for various styles, states, and interactive features built on top of Flutter's Material Design principles.

Features

• Multiple Button Types: Primary, secondary, outlined, text, and icon buttons
• Custom Styling: Full control over colors, borders, and typography
• Loading States: Built-in loading indicator support
• Icon Support: Leading and trailing icons with customizable positioning
• Responsive Design: Adapts to different screen sizes and orientations
• Accessibility: Full accessibility support with semantic labels
• Animation: Smooth hover and press animations

Usage

Basic Usage

ButtonAppi(
  text: 'Click Me',
  onPressed: () {
    print('Button pressed!');
  },
)

Advanced Usage

ButtonAppi(
  text: 'Submit',
  onPressed: _handleSubmit,
  buttonType: ButtonType.primary,
  isLoading: _isSubmitting,
  leadingIcon: Icons.send,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  borderRadius: 12.0,
  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
)

Parameters

Name	Type	Description	Default
text	String?	Text to display on the button	null
onPressed	VoidCallback?	Callback when button is pressed	null
buttonType	ButtonType?	Type of button (primary, secondary, outlined, text)	ButtonType.primary
isLoading	bool?	Whether to show loading indicator	false
isEnabled	bool?	Whether the button is enabled	true
leadingIcon	IconData?	Icon to show before the text	null
trailingIcon	IconData?	Icon to show after the text	null
backgroundColor	Color?	Background color of the button	Theme dependent
textColor	Color?	Color of the button text	Theme dependent
borderColor	Color?	Color of the button border	Theme dependent
borderRadius	double?	Border radius of the button	8.0
borderWidth	double?	Width of the button border	1.0
padding	EdgeInsets?	Internal padding of the button	EdgeInsets.symmetric(horizontal: 16, vertical: 12)
textStyle	TextStyle?	Style for the button text	Theme dependent
iconSize	double?	Size of the icons	18.0
iconSpacing	double?	Spacing between icon and text	8.0
elevation	double?	Elevation of the button	2.0
splashColor	Color?	Color of the splash effect	Theme dependent
highlightColor	Color?	Color when button is highlighted	Theme dependent
focusColor	Color?	Color when button is focused	Theme dependent
hoverColor	Color?	Color when button is hovered	Theme dependent
width	double?	Fixed width of the button	null
height	double?	Fixed height of the button	null
semanticLabel	String?	Semantic label for accessibility	null

ButtonType Enum

enum ButtonType {
  primary,    // Filled button with primary color
  secondary,  // Filled button with secondary color
  outlined,   // Outlined button with transparent background
  text,       // Text-only button with no background
  icon,       // Icon-only button
}

Best Practices

1. Button Hierarchy: Use primary buttons for main actions, secondary for supporting actions
2. Loading States: Always provide loading feedback for async operations
3. Accessibility: Provide semantic labels for screen readers
4. Consistent Styling: Maintain consistent button styles throughout your app
5. Touch Targets: Ensure buttons meet minimum touch target size (44x44 points)
6. Visual Feedback: Use appropriate colors and animations for user feedback

Examples

Primary Button

ButtonAppi(
  text: 'Save Changes',
  buttonType: ButtonType.primary,
  onPressed: () => _saveChanges(),
  leadingIcon: Icons.save,
)

Loading Button

ButtonAppi(
  text: 'Processing...',
  isLoading: _isProcessing,
  onPressed: _isProcessing ? null : _processData,
  buttonType: ButtonType.primary,
)

Outlined Button

ButtonAppi(
  text: 'Cancel',
  buttonType: ButtonType.outlined,
  onPressed: () => Navigator.pop(context),
  borderColor: Colors.red,
  textColor: Colors.red,
)

Icon Button

ButtonAppi(
  buttonType: ButtonType.icon,
  leadingIcon: Icons.favorite,
  onPressed: _toggleFavorite,
  backgroundColor: Colors.transparent,
  iconSize: 24.0,
)

Custom Styled Button

ButtonAppi(
  text: 'Get Started',
  onPressed: _getStarted,
  backgroundColor: Colors.gradient,
  textColor: Colors.white,
  borderRadius: 25.0,
  padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  elevation: 4.0,
  textStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
)

Button with Both Icons

ButtonAppi(
  text: 'Download',
  leadingIcon: Icons.download,
  trailingIcon: Icons.arrow_forward,
  onPressed: _downloadFile,
  buttonType: ButtonType.primary,
  iconSpacing: 12.0,
)