Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Alerts

Ported from HyperUI’s Alerts — see Attribution.

Info

Section titled “Info”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Alerts1Example extends StatelessWidget {
  const Alerts1Example({super.key});


  static const _infoIconSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z" clip-rule="evenodd"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'border-2 bg-blue-100 p-4 text-blue-900 shadow-[4px_4px_0_0] shadow-black dark:bg-blue-800 dark:text-blue-50 dark:shadow-white',
        child: Style(
          'flex items-start gap-3',
          children: [
            Style('mt-0.5 size-4', child: CurrentColorIcon(_infoIconSvg)),
            Style(
              'block flex-1 leading-tight font-semibold',
              children: const [
                Style('sr-only', child: Text('Info: ')),
                Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Success

Section titled “Success”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Alerts2Example extends StatelessWidget {
  const Alerts2Example({super.key});


  static const _successIconSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'border-2 bg-green-100 p-4 text-green-900 shadow-[4px_4px_0_0] shadow-black dark:bg-green-800 dark:text-green-50 dark:shadow-white',
        child: Style(
          'flex items-start gap-3',
          children: [
            Style('mt-0.5 size-4', child: CurrentColorIcon(_successIconSvg)),
            Style(
              'block flex-1 leading-tight font-semibold',
              children: const [
                Style('sr-only', child: Text('Success: ')),
                Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Error

Section titled “Error”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


class Alerts3Example extends StatelessWidget {
  const Alerts3Example({super.key});


  static const _errorIconSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'border-2 bg-red-100 p-4 text-red-900 shadow-[4px_4px_0_0] shadow-black dark:bg-red-800 dark:text-red-50 dark:shadow-white',
        child: Style(
          'flex items-start gap-3',
          children: [
            Style('mt-0.5 size-4', child: CurrentColorIcon(_errorIconSvg)),
            Style(
              'block flex-1 leading-tight font-semibold',
              children: const [
                Style('sr-only', child: Text('Error: ')),
                Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!',
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}