Skip to main content

AsButton

A versatile button component that adapts to the current platform with support for different styles, loading states, and accessibility features.

Import​

import 'package:alphasow_ui/alphasow_ui.dart';

Basic Usage​

AsButton(
  onPressed: () {
    print('Button pressed!');
  },
  child: const Text('Press Me'),
)

Button Styles​

Primary Button (Default)​

AsButton(
  style: AsButtonStyle.primary, // Optional, this is the default
  onPressed: () {},
  child: const Text('Primary Button'),
)

Secondary Button​

AsButton(
  style: AsButtonStyle.secondary,
  onPressed: () {},
  child: const Text('Secondary Button'),
)

Outline Button​

AsButton(
  style: AsButtonStyle.outline,
  onPressed: () {},
  child: const Text('Outline Button'),
)

Loading State​

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return AsButton(
      loading: _isLoading,
      onPressed: _isLoading ? null : () async {
        setState(() => _isLoading = true);
        
        // Simulate async operation
        await Future.delayed(const Duration(seconds: 2));
        
        setState(() => _isLoading = false);
      },
      child: const Text('Submit'),
    );
  }
}

Custom Colors​

AsButton(
  backgroundColor: Colors.green,
  foregroundColor: Colors.white,
  onPressed: () {},
  child: const Text('Custom Colors'),
)

Disabled State​

AsButton(
  onPressed: null, // null makes the button disabled
  child: const Text('Disabled Button'),
)

Full Width Button​

SizedBox(
  width: double.infinity,
  child: AsButton(
    onPressed: () {},
    child: const Text('Full Width Button'),
  ),
)

API Reference​

Properties​

PropertyTypeDefaultDescription
childWidgetrequiredThe button's child widget (usually Text)
onPressedVoidCallback?requiredCalled when button is pressed. null disables the button
styleAsButtonStyle?AsButtonStyle.primaryVisual style of the button
loadingboolfalseShows loading spinner when true
backgroundColorColor?nullCustom background color
foregroundColorColor?nullCustom text/icon color
borderRadiusBorderRadius?nullCustom border radius
paddingEdgeInsetsGeometry?nullCustom padding
elevationdouble?nullShadow elevation (Material only)
semanticsLabelString?nullAccessibility label

AsButtonStyle​

  • AsButtonStyle.primary - Filled button with primary color
  • AsButtonStyle.secondary - Filled button with secondary color
  • AsButtonStyle.outline - Outlined button with transparent background
  • AsButtonStyle.text - Text-only button with no background

Platform Differences​

Material (Android/Web)​

  • Uses ElevatedButton, OutlinedButton, or TextButton
  • Supports Material elevation and ripple effects
  • Follows Material Design 3 guidelines

Cupertino (iOS/macOS)​

  • Uses CupertinoButton
  • iOS-style pressed state animation
  • Follows iOS Human Interface Guidelines

Accessibility​

AsButton automatically includes:

  • Proper semantic roles
  • Touch target size enforcement (minimum 44x44 points)
  • Focus and keyboard navigation support
  • Screen reader compatibility

Examples​

With Icon​

AsButton(
  onPressed: () {},
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Icon(Icons.download),
      const SizedBox(width: 8),
      const Text('Download'),
    ],
  ),
)

Rounded Button​

AsButton(
  borderRadius: BorderRadius.circular(30),
  onPressed: () {},
  child: const Text('Rounded'),
)

Large Button​

AsButton(
  padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  onPressed: () {},
  child: const Text('Large Button'),
)

See Also​