AsLinkButton

Un bouton basé sur du texte qui apparaît comme un lien cliquable avec un style personnalisable et des effets de survol.

Import

import 'package:alphasow_ui/alphasow_ui.dart';

Utilisation de Base

AsLinkButton(
  text: 'Click here',
  onPressed: () {
    print('Bouton lien pressé !');
  },
)

Avec Style Personnalisé

AsLinkButton(
  text: 'Custom Link',
  color: Colors.blue,
  fontSize: 16,
  fontWeight: FontWeight.w600,
  onPressed: () {},
)

Lien Souligné

AsLinkButton(
  text: 'Underlined Link',
  underline: true,
  onPressed: () {},
)

Style de Lien Externe

AsLinkButton(
  text: 'External Link',
  external: true, // Adds external link icon
  onPressed: () {
    // Open external URL
  },
)

Disabled State

AsLinkButton(
  text: 'Disabled Link',
  onPressed: null, // null makes the link disabled
)

API Reference

Properties

Property	Type	Default	Description
text	String	required	The text to display
onPressed	VoidCallback?	required	Called when button is pressed. null disables the button
color	Color?	null	Custom text color
fontSize	double?	null	Custom font size
fontWeight	FontWeight?	null	Custom font weight
underline	bool	false	Whether to show underline
external	bool	false	Whether to show external link icon
semanticsLabel	String?	null	Accessibility label

Examples

Navigation Link

AsLinkButton(
  text: 'Go to Settings',
  onPressed: () {
    Navigator.pushNamed(context, '/settings');
  },
)

URL Link

AsLinkButton(
  text: 'Visit Website',
  external: true,
  underline: true,
  onPressed: () async {
    const url = 'https://example.com';
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    }
  },
)

Inline Link

RichText(
  text: TextSpan(
    text: 'By signing up, you agree to our ',
    style: TextStyle(color: Colors.black),
    children: [
      WidgetSpan(
        child: AsLinkButton(
          text: 'Terms of Service',
          fontSize: 14,
          onPressed: () {
            // Show terms
          },
        ),
      ),
    ],
  ),
)

Custom Hover Effect

class CustomLinkButton extends StatefulWidget {
  @override
  _CustomLinkButtonState createState() => _CustomLinkButtonState();
}

class _CustomLinkButtonState extends State<CustomLinkButton> {
  bool _isHovering = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovering = true),
      onExit: (_) => setState(() => _isHovering = false),
      child: AsLinkButton(
        text: 'Hover Me',
        color: _isHovering ? Colors.blue : Colors.grey,
        underline: _isHovering,
        onPressed: () {},
      ),
    );
  }
}

Platform Differences

Material (Android/Web)

• Uses Material text button styling
• Material hover and focus effects
• Follows Material Design guidelines

Cupertino (iOS/macOS)

• Uses Cupertino button styling
• iOS-style pressed state
• Follows iOS Human Interface Guidelines

See Also

• AsButton - For standard buttons
• AsIconButton - For icon-only buttons
• Link Button Examples - Live demo