Skip to main content

Component Overview

Alphasow UI provides a comprehensive collection of Flutter UI components designed for consistent theming and platform adaptation. All components automatically switch between Material Design and Cupertino styling based on the current platform.

Component Categories​

🔘 Buttons​

Interactive elements for user actions.

📝 Forms & Input​

Components for data collection and form validation.

🚨 Alerts & Notifications​

Components for displaying messages and getting user attention.

🧭 Navigation & Layout​

Components for app structure and navigation.

  • AsScaffold - Platform-adaptive scaffold
  • AsAppBar - Application bar component
  • AsNavigationRail - Side navigation
  • AsListTile - List item component

🎨 Visual Elements​

Components for visual presentation and feedback.

  • AsAvatar - User avatar component
  • AsCard - Card container component
  • AsLabel - Text labels with styling
  • AsDivider - Visual separators

⏳ Loading Indicators​

Components for showing loading states.

📋 Menus​

Dropdown and contextual menu components.

  • AsMenuDropdown - Dropdown menu component
  • AsMenuDown - Contextual dropdown menus
  • AsMenuDrawer - Navigation drawer component

Platform Adaptation​

All components automatically adapt their appearance based on the current platform:

iOS/macOS (Cupertino)​

  • Native iOS design language
  • Cupertino colors and typography
  • iOS-style animations and transitions

Android/Web (Material)​

  • Material Design 3 principles
  • Material color system
  • Material motion and elevation

Common Properties​

Most Alphasow UI components share these common properties:

Styling​

  • style - Custom styling options
  • color - Primary color override
  • backgroundColor - Background color override

Behavior​

  • onPressed - Tap/click callback (interactive components)
  • disabled - Disable interaction
  • loading - Show loading state (where applicable)

Accessibility​

  • semanticsLabel - Screen reader description
  • excludeSemantics - Exclude from accessibility tree

Usage Patterns​

Basic Component Usage​

AsButton(
  onPressed: () {
    // Handle button press
  },
  child: const Text('Press Me'),
)

With Custom Styling​

AsButton(
  style: AsButtonStyle.secondary,
  backgroundColor: Colors.green,
  onPressed: () {
    // Handle button press
  },
  child: const Text('Custom Button'),
)

With Loading State​

AsButton(
  loading: isLoading,
  onPressed: isLoading ? null : () {
    // Handle button press
  },
  child: const Text('Submit'),
)

Getting Started​

  1. Import the package:

    import 'package:alphasow_ui/alphasow_ui.dart';

  2. Wrap your app with AlphasowUiApp:

    AlphasowUiApp(
      home: MyHomePage(),
    )

  3. Start using components:

    AsButton(
      onPressed: () => context.showBanner(
        message: 'Hello!',
        type: AlertType.success,
      ),
      child: const Text('Show Banner'),
    )

Next Steps​