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

Toasts

Ported from HyperUI’s Toasts — see Attribution.

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));
  }
}


const _successIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'ml-auto max-w-md p-6',
      child: Style(
        'rounded-md border border-green-500 bg-green-50 p-4 shadow-sm dark:border-green-400 dark:bg-green-800',
        child: Style(
          'flex items-start gap-4',
          children: [
            const Style(
              '-mt-0.5 size-6 text-green-700 dark:text-green-200',
              child: CurrentColorIcon(_successIconSvg),
            ),
            Style(
              'flex-1',
              children: const [
                Style(
                  'block leading-tight font-medium text-green-800 dark:text-green-100',
                  child: Text('Success'),
                ),
                Style(
                  'mt-0.5 text-sm text-green-700 dark:text-green-200',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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));
  }
}


const _errorIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'ml-auto max-w-md p-6',
      child: Style(
        'rounded-md border border-red-500 bg-red-50 p-4 shadow-sm dark:border-red-400 dark:bg-red-800',
        child: Style(
          'flex items-start gap-4',
          children: [
            const Style(
              '-mt-0.5 size-6 text-red-700 dark:text-red-200',
              child: CurrentColorIcon(_errorIconSvg),
            ),
            Style(
              'flex-1',
              children: const [
                Style(
                  'block leading-tight font-medium text-red-800 dark:text-red-100',
                  child: Text('Error'),
                ),
                Style(
                  'mt-0.5 text-sm text-red-700 dark:text-red-200',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Warning

Section titled “Warning”

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));
  }
}


const _warningIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'ml-auto max-w-md p-6',
      child: Style(
        'rounded-md border border-amber-500 bg-amber-50 p-4 shadow-sm dark:border-amber-400 dark:bg-amber-800',
        child: Style(
          'flex items-start gap-4',
          children: [
            const Style(
              '-mt-0.5 size-6 text-amber-700 dark:text-amber-200',
              child: CurrentColorIcon(_warningIconSvg),
            ),
            Style(
              'flex-1',
              children: const [
                Style(
                  'block leading-tight font-medium text-amber-800 dark:text-amber-100',
                  child: Text('Warning'),
                ),
                Style(
                  'mt-0.5 text-sm text-amber-700 dark:text-amber-200',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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));
  }
}


const _infoIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'ml-auto max-w-md p-6',
      child: Style(
        'rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm dark:border-blue-400 dark:bg-blue-800',
        child: Style(
          'flex items-start gap-4',
          children: [
            const Style(
              '-mt-0.5 size-6 text-blue-700 dark:text-blue-200',
              child: CurrentColorIcon(_infoIconSvg),
            ),
            Style(
              'flex-1',
              children: const [
                Style(
                  'block leading-tight font-medium text-blue-800 dark:text-blue-100',
                  child: Text('Info'),
                ),
                Style(
                  'mt-0.5 text-sm text-blue-700 dark:text-blue-200',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

With action button

Section titled “With action button”

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));
  }
}


const _infoIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'ml-auto max-w-md p-6',
      child: Style(
        'rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm dark:border-blue-400 dark:bg-blue-800',
        child: Style(
          'flex items-start gap-4',
          children: [
            const Style(
              '-mt-0.5 size-6 text-blue-700 dark:text-blue-200',
              child: CurrentColorIcon(_infoIconSvg),
            ),
            Style(
              'flex-1',
              children: const [
                Style(
                  'block leading-tight font-medium text-blue-800 dark:text-blue-100',
                  child: Text('Info'),
                ),
                Style(
                  'mt-0.5 text-sm text-blue-700 dark:text-blue-200',
                  child: Text(
                    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.',
                  ),
                ),
                Style(
                  'mt-2 inline-block rounded-sm border border-blue-600 bg-blue-600 px-4 py-2 text-sm/none font-medium text-white hover:bg-transparent hover:text-blue-600 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:text-white',
                  child: Text('Accept'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Standout

Section titled “Standout”

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));
  }
}


const _infoIconSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'ml-auto max-w-md p-6',
      child: Style(
        'border-s-4 border-blue-700 bg-blue-50 p-4 dark:border-blue-600 dark:bg-blue-800',
        children: [
          Style(
            'flex items-center gap-2 text-blue-700 dark:text-blue-200',
            children: const [
              Style('size-6', child: CurrentColorIcon(_infoIconSvg)),
              Style(
                'block leading-tight font-medium text-blue-800 dark:text-blue-100',
                child: Text('Info'),
              ),
            ],
          ),
          const Style(
            'mt-1 text-sm text-blue-700 dark:text-blue-200',
            child: Text(
              'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.',
            ),
          ),
        ],
      ),
    );
  }
}