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

Header

Ported from HyperUI’s Header — see Attribution.

Icon and links on the left, call to actions on the right

Section titled “Icon and links on the left, call to actions on the right”

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 _logoSvg =
    '''<svg viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z" fill="currentColor"/></svg>''';


const _hamburgerSvg =
    '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'bg-white dark:bg-gray-900',
      child: Style(
        'mx-auto flex h-16 max-w-7xl items-center gap-8 px-4 sm:px-6 lg:px-8',
        children: [
          Style(
            'block text-teal-600 dark:text-teal-300',
            cursor: SystemMouseCursors.click,
            children: [
              Style('sr-only', child: Text('Home')),
              Style('h-8', child: CurrentColorIcon(_logoSvg)),
            ],
          ),
          Style(
            'flex flex-1 items-center justify-end md:justify-between',
            children: [
              Style(
                'hidden md:block',
                child: Style(
                  'flex items-center gap-6 text-sm',
                  children: [
                    Style(
                      'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                      cursor: SystemMouseCursors.click,
                      child: Text('About'),
                    ),
                    Style(
                      'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                      cursor: SystemMouseCursors.click,
                      child: Text('Careers'),
                    ),
                    Style(
                      'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                      cursor: SystemMouseCursors.click,
                      child: Text('History'),
                    ),
                    Style(
                      'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                      cursor: SystemMouseCursors.click,
                      child: Text('Services'),
                    ),
                    Style(
                      'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                      cursor: SystemMouseCursors.click,
                      child: Text('Projects'),
                    ),
                    Style(
                      'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                      cursor: SystemMouseCursors.click,
                      child: Text('Blog'),
                    ),
                  ],
                ),
              ),
              Style(
                'flex items-center gap-4',
                children: [
                  Style(
                    'sm:flex sm:gap-4',
                    children: [
                      Style(
                        'block rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-700 dark:hover:bg-teal-500',
                        cursor: SystemMouseCursors.click,
                        child: Text('Login'),
                      ),
                      Style(
                        'hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 transition hover:text-teal-600/75 sm:block dark:bg-gray-800 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Register'),
                      ),
                    ],
                  ),
                  Style(
                    'block rounded-sm bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden dark:bg-gray-800 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    children: [
                      Style('sr-only', child: Text('Toggle menu')),
                      Style('size-5', child: CurrentColorIcon(_hamburgerSvg)),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Icon on the left, links in the middle and call to actions on the right

Section titled “Icon on the left, links in the middle and call to actions on the right”

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 _logoSvg =
    '''<svg viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z" fill="currentColor"/></svg>''';


const _hamburgerSvg =
    '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'bg-white dark:bg-gray-900',
      child: Style(
        'mx-auto max-w-7xl px-4 sm:px-6 lg:px-8',
        child: Style(
          'flex h-16 items-center justify-between',
          children: [
            Style(
              'md:flex md:items-center md:gap-12',
              child: Style(
                'block text-teal-600 dark:text-teal-600',
                cursor: SystemMouseCursors.click,
                children: [
                  Style('sr-only', child: Text('Home')),
                  Style('h-8', child: CurrentColorIcon(_logoSvg)),
                ],
              ),
            ),
            Style(
              'hidden md:block',
              child: Style(
                'flex items-center gap-6 text-sm',
                children: [
                  Style(
                    'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    child: Text('About'),
                  ),
                  Style(
                    'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    child: Text('Careers'),
                  ),
                  Style(
                    'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    child: Text('History'),
                  ),
                  Style(
                    'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    child: Text('Services'),
                  ),
                  Style(
                    'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    child: Text('Projects'),
                  ),
                  Style(
                    'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    child: Text('Blog'),
                  ),
                ],
              ),
            ),
            Style(
              'flex items-center gap-4',
              children: [
                Style(
                  'sm:flex sm:gap-4',
                  children: [
                    Style(
                      'rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm dark:hover:bg-teal-500',
                      cursor: SystemMouseCursors.click,
                      child: Text('Login'),
                    ),
                    Style(
                      'hidden sm:flex',
                      child: Style(
                        'rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 dark:bg-gray-800 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Register'),
                      ),
                    ),
                  ],
                ),
                Style(
                  'block md:hidden',
                  child: Style(
                    'rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75',
                    cursor: SystemMouseCursors.click,
                    children: [
                      Style('sr-only', child: Text('Toggle menu')),
                      Style('size-5', child: CurrentColorIcon(_hamburgerSvg)),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Icon on the left, links and call to actions on the right

Section titled “Icon on the left, links and call to actions on the right”

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 _logoSvg =
    '''<svg viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z" fill="currentColor"/></svg>''';


const _hamburgerSvg =
    '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'bg-white dark:bg-gray-900',
      child: Style(
        'mx-auto max-w-7xl px-4 sm:px-6 lg:px-8',
        child: Style(
          'flex h-16 items-center justify-between',
          children: [
            Style(
              'flex-1 md:flex md:items-center md:gap-12',
              child: Style(
                'block text-teal-600 dark:text-teal-300',
                cursor: SystemMouseCursors.click,
                children: [
                  Style('sr-only', child: Text('Home')),
                  Style('h-8', child: CurrentColorIcon(_logoSvg)),
                ],
              ),
            ),
            Style(
              'md:flex md:items-center md:gap-12',
              children: [
                Style(
                  'hidden md:block',
                  child: Style(
                    'flex items-center gap-6 text-sm',
                    children: [
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('About'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Careers'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('History'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Services'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Projects'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Blog'),
                      ),
                    ],
                  ),
                ),
                Style(
                  'flex items-center gap-4',
                  children: [
                    Style(
                      'sm:flex sm:gap-4',
                      children: [
                        Style(
                          'rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm dark:hover:bg-teal-500',
                          cursor: SystemMouseCursors.click,
                          child: Text('Login'),
                        ),
                        Style(
                          'hidden sm:flex',
                          child: Style(
                            'rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 dark:bg-gray-800 dark:text-white dark:hover:text-white/75',
                            cursor: SystemMouseCursors.click,
                            child: Text('Register'),
                          ),
                        ),
                      ],
                    ),
                    Style(
                      'block md:hidden',
                      child: Style(
                        'rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75 dark:bg-gray-800 dark:text-white dark:hover:text-white/75',
                        cursor: SystemMouseCursors.click,
                        children: [
                          Style('sr-only', child: Text('Toggle menu')),
                          Style(
                            'size-5',
                            child: CurrentColorIcon(_hamburgerSvg),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Icon on the left, links and user dropdown on the right

Section titled “Icon on the left, links and user dropdown on the right”

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 _logoSvg =
    '''<svg viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z" fill="currentColor"/></svg>''';


const _hamburgerSvg =
    '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>''';


const _logoutSvg =
    '''<svg aria-hidden="true" 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 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"/></svg>''';


const _avatarPhotoUrl =
    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=1160';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'bg-white',
      child: Style(
        'mx-auto max-w-7xl px-4 sm:px-6 lg:px-8',
        child: Style(
          'flex h-16 items-center justify-between',
          children: [
            Style(
              'flex-1 md:flex md:items-center md:gap-12',
              child: Style(
                'block text-teal-600',
                cursor: SystemMouseCursors.click,
                children: [
                  Style('sr-only', child: Text('Home')),
                  Style('h-8', child: CurrentColorIcon(_logoSvg)),
                ],
              ),
            ),
            Style(
              'md:flex md:items-center md:gap-12',
              children: [
                Style(
                  'hidden md:block',
                  child: Style(
                    'flex items-center gap-6 text-sm',
                    children: [
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('About'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Careers'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('History'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Services'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Projects'),
                      ),
                      Style(
                        'text-gray-500 transition hover:text-gray-500/75',
                        cursor: SystemMouseCursors.click,
                        child: Text('Blog'),
                      ),
                    ],
                  ),
                ),
                Style(
                  'hidden md:relative md:block',
                  children: [
                    Style(
                      'overflow-hidden rounded-full border border-gray-300 shadow-inner',
                      cursor: SystemMouseCursors.click,
                      children: [
                        Style('sr-only', child: Text('Toggle dashboard menu')),
                        Style(
                          'size-10 object-cover',
                          child: Image.network(
                            _avatarPhotoUrl,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ],
                    ),
                    Style(
                      'absolute end-0 z-10 mt-0.5 w-56 divide-y divide-gray-100 rounded-md border border-gray-100 bg-white shadow-lg',
                      children: [
                        Style(
                          'p-2',
                          children: [
                            Style(
                              'block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700',
                              cursor: SystemMouseCursors.click,
                              child: Text('My profile'),
                            ),
                            Style(
                              'block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700',
                              cursor: SystemMouseCursors.click,
                              child: Text('Billing summary'),
                            ),
                            Style(
                              'block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700',
                              cursor: SystemMouseCursors.click,
                              child: Text('Team settings'),
                            ),
                          ],
                        ),
                        Style(
                          'p-2',
                          child: Style(
                            'flex w-full items-center gap-2 rounded-lg px-4 py-2 text-sm text-red-700 hover:bg-red-50',
                            cursor: SystemMouseCursors.click,
                            children: [
                              Style(
                                'size-4',
                                child: CurrentColorIcon(_logoutSvg),
                              ),
                              const Text('Logout'),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                Style(
                  'block md:hidden',
                  child: Style(
                    'rounded-sm bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75',
                    cursor: SystemMouseCursors.click,
                    children: [
                      Style('sr-only', child: Text('Toggle menu')),
                      Style('size-5', child: CurrentColorIcon(_hamburgerSvg)),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}