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

Empty Content

Ported from HyperUI’s Empty Content — see Attribution.

No search results

Section titled “No search results”

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 _emptyContentIconSvg =
    '''<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="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex min-h-screen items-center justify-center p-6',
      child: Style(
        'max-w-md text-center',
        children: [
          const Style(
            'mx-auto size-20 text-gray-400 dark:text-gray-500',
            child: CurrentColorIcon(_emptyContentIconSvg),
          ),
          const Style(
            'mt-6 text-2xl font-bold text-gray-900 dark:text-white',
            child: Text('Hmm, nothing found'),
          ),
          const Style(
            'mt-4 text-pretty text-gray-700 dark:text-gray-200',
            child: Text(
              "We couldn't find what you were looking for. Try a different search term or explore our popular categories.",
            ),
          ),
          const Style(
            'mt-6 space-y-2',
            children: [
              Style(
                'block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700',
                cursor: SystemMouseCursors.click,
                child: Text('Browse Popular Items'),
              ),
              Style(
                'block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800',
                cursor: SystemMouseCursors.click,
                child: Text('Refine Search'),
              ),
            ],
          ),
          Style(
            'mt-6 text-sm text-gray-700 dark:text-gray-200',
            child: Center(
              child: Row(
                textDirection: TextDirection.ltr,
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Text('Popular searches: '),
                  Style(
                    'text-indigo-600 hover:underline dark:text-indigo-300',
                    cursor: SystemMouseCursors.click,
                    child: Text('Trending'),
                  ),
                  Text(', '),
                  Style(
                    'text-indigo-600 hover:underline dark:text-indigo-300',
                    cursor: SystemMouseCursors.click,
                    child: Text('New'),
                  ),
                  Text(', '),
                  Style(
                    'text-indigo-600 hover:underline dark:text-indigo-300',
                    cursor: SystemMouseCursors.click,
                    child: Text('Best sellers'),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

No search results (alternative)

Section titled “No search results (alternative)”

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 _emptyContentIconSvg =
    '''<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="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex min-h-screen items-center justify-center p-6',
      child: Style(
        'max-w-md text-center',
        children: const [
          Style(
            'mx-auto size-20 text-gray-400 dark:text-gray-500',
            child: CurrentColorIcon(_emptyContentIconSvg),
          ),
          Style(
            'mt-6 text-2xl font-bold text-gray-900 dark:text-white',
            child: Text('Hmm, nothing found'),
          ),
          Style(
            'mt-4 text-pretty text-gray-700 dark:text-gray-200',
            child: Text(
              "We couldn't find what you were looking for. Try a different search term or explore our popular categories.",
            ),
          ),
          Style(
            'mt-6 space-y-2',
            children: [
              Style(
                'block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700',
                cursor: SystemMouseCursors.click,
                child: Text('Browse Popular Items'),
              ),
              Style(
                'block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800',
                cursor: SystemMouseCursors.click,
                child: Text('Refine Search'),
              ),
            ],
          ),
          Style(
            'mt-6 flex flex-wrap justify-center gap-8 text-sm',
            children: [
              Style(
                'text-indigo-600 hover:underline dark:text-indigo-300',
                cursor: SystemMouseCursors.click,
                child: Text('Trending'),
              ),
              Style(
                'text-indigo-600 hover:underline dark:text-indigo-300',
                cursor: SystemMouseCursors.click,
                child: Text('New'),
              ),
              Style(
                'text-indigo-600 hover:underline dark:text-indigo-300',
                cursor: SystemMouseCursors.click,
                child: Text('Best sellers'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Coming soon

Section titled “Coming soon”

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

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


  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'flex min-h-screen items-center justify-center p-6',
      child: Style(
        'max-w-md text-center',
        children: [
          const Style(
            'text-2xl font-bold text-gray-900 dark:text-white',
            child: Text('Coming soon!'),
          ),
          const Style(
            'mt-4 text-pretty text-gray-700 dark:text-gray-200',
            child: Text(
              "We're working on something exciting. Be the first to know when it launches.",
            ),
          ),
          Style(
            'mt-6 space-y-2',
            children: [
              Style(
                'w-full rounded-lg border-gray-300 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white',
                child: TextFormField(
                  keyboardType: TextInputType.emailAddress,
                  decoration: const InputDecoration(hintText: 'your@email.com'),
                  style: baseStyle.copyWith(
                    fontSize: 14,
                    height: 20 / 14,
                    color: isDark ? Colors.white : Colors.black,
                  ),
                ),
              ),
              Style(
                'block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700',
                cursor: SystemMouseCursors.click,
                child: const Text('Notify Me'),
              ),
            ],
          ),
          const Style(
            'mt-6 text-sm text-gray-700 dark:text-gray-200',
            child: Text("We'll let you know the moment it's available."),
          ),
        ],
      ),
    );
  }
}

Related content

Section titled “Related content”

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 _emptyContentIconSvg =
    '''<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="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex min-h-screen items-center justify-center p-6',
      child: Style(
        'max-w-md text-center',
        children: [
          const Style(
            'mx-auto size-20 text-gray-400 dark:text-gray-500',
            child: CurrentColorIcon(_emptyContentIconSvg),
          ),
          const Style(
            'mt-6 text-2xl font-bold text-gray-900 dark:text-white',
            child: Text('Explore more'),
          ),
          const Style(
            'mt-4 text-pretty text-gray-700 dark:text-gray-200',
            child: Text(
              "This section doesn't have content right now. Discover related topics and inspiration instead.",
            ),
          ),
          Style(
            'mt-6 space-y-2',
            children: [
              Style(
                'block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800',
                cursor: SystemMouseCursors.click,
                children: const [
                  Style(
                    'font-medium text-gray-900 dark:text-white',
                    child: Text('Featured Collection'),
                  ),
                  Style(
                    'mt-1 text-sm text-gray-600 dark:text-gray-300',
                    child: Text('Browse our curated selection'),
                  ),
                ],
              ),
              Style(
                'block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800',
                cursor: SystemMouseCursors.click,
                children: const [
                  Style(
                    'font-medium text-gray-900 dark:text-white',
                    child: Text('Latest Trends'),
                  ),
                  Style(
                    'mt-1 text-sm text-gray-600 dark:text-gray-300',
                    child: Text("See what's trending now"),
                  ),
                ],
              ),
            ],
          ),
          const Style(
            'mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700',
            cursor: SystemMouseCursors.click,
            child: Text('Back to Shopping'),
          ),
        ],
      ),
    );
  }
}

No stock

Section titled “No stock”

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 _emptyContentIconSvg =
    '''<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="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex min-h-screen items-center justify-center p-6',
      child: Style(
        'max-w-md text-center',
        children: [
          const Style(
            'mx-auto size-20 text-gray-400 dark:text-gray-500',
            child: CurrentColorIcon(_emptyContentIconSvg),
          ),
          const Style(
            'mt-6 text-2xl font-bold text-gray-900 dark:text-white',
            child: Text('Out of stock'),
          ),
          const Style(
            'mt-4 text-pretty text-gray-700 dark:text-gray-200',
            child: Text(
              'This item is currently unavailable. Check back soon or explore similar products.',
            ),
          ),
          const Style(
            'mt-6 space-y-2',
            children: [
              Style(
                'block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700',
                cursor: SystemMouseCursors.click,
                child: Text('Notify When Available'),
              ),
              Style(
                'block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800',
                cursor: SystemMouseCursors.click,
                child: Text('Explore Similar Products'),
              ),
            ],
          ),
          Style(
            'mt-6 text-sm text-gray-700 dark:text-gray-200',
            child: Center(
              child: Row(
                textDirection: TextDirection.ltr,
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Text('Last restocked: '),
                  Style('font-medium', child: Text('3 weeks ago')),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}