Flutter: SliverAppBar for Sticky Headers and Search Bars

SliverAppBar is one of the most powerful upgrades you can make beyond a standard AppBar. It is ideal for headers that collapse on scroll, stay pinned at the top, or include a search bar.

Live Demo

You can try the AppBar structure in the interactive example below:

💡 If the example does not open, click the DartPad link to run it in a new tab.

Why Use SliverAppBar?

When users scroll through content, keeping the header available improves navigation flow. SliverAppBar gives you much more flexibility for search bars, category selectors, and image-heavy headers.

This topic matches strong search intent around phrases like "flutter sliverappbar", "sticky header flutter", and "flutter appbar search bar".

Basic Usage

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('Explore'),
      pinned: true,
      floating: false,
      expandedHeight: 220,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://example.com/banner.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 30,
      ),
    ),
  ],
)

What pinned, floating, and snap Do

• pinned: Keeps the header fixed at the top.
• floating: Makes the header reappear quickly when scrolling back.
• snap: Creates a faster open/close effect when used with floating.

This combination works especially well in news, blog, and catalog apps.

Using It as a Search Bar

You can embed a search field directly inside SliverAppBar.

SliverAppBar(
  pinned: true,
  title: TextField(
    decoration: InputDecoration(
      hintText: 'Search...',
      border: InputBorder.none,
      prefixIcon: Icon(Icons.search),
    ),
  ),
)

Strengthen the Header with flexibleSpace

flexibleSpace lets you make the header more visual by adding gradients, images, or blur effects.

SliverAppBar(
  expandedHeight: 240,
  pinned: true,
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.indigo, Colors.blue],
      ),
    ),
    child: const FlexibleSpaceBar(
      title: Text('Featured'),
    ),
  ),
)

When a Regular AppBar Is Enough

If you only need a simple top bar on a small static screen, a standard AppBar is enough. But when the header must adapt while scrolling, SliverAppBar feels much more polished.

Common Mistakes

• Using SliverAppBar without building the surrounding CustomScrollView correctly
• Picking an overly large expandedHeight
• Sacrificing readability while adding a search field
• Overloading the header with unnecessary effects

Frequently Asked Questions

What is the difference between AppBar and SliverAppBar?

AppBar is static, while SliverAppBar can expand and collapse with scroll behavior.

Is SliverAppBar good for search bars?

Yes. It is especially useful in catalog, blog, and content-list screens.

Do I always need pinned?

No, but in most modern interfaces a pinned header provides a better experience.

Summary

SliverAppBar is one of the best ways to build sticky headers, search bars, and visually rich top areas in Flutter. Used correctly, it improves both UX quality and the SEO value of the article.