Level Up Your Lists: Say Hello to SliverList, Bye shrinkWrap 👋

A Flutter dev’s guide to smoother scrolls, better performance, and scalable UI design.

When you’re building beautiful and dynamic UIs in Flutter, it’s natural to reach for ListView with shrinkWrap: true. It works — until your app starts to grow. Then, things begin to lag. The scrolling feels janky. The performance drops. Sound familiar?

If you’ve ever struggled with sluggish list performance, especially in nested scrollable widgets, this post is your fix.

Let’s talk about how SliverList and CustomScrollView can dramatically boost your scroll performance — and when it’s time to make the switch.

💥 What’s Really Going On with

shrinkWrap: true?

shrinkWrap: true tells Flutter to measure the entire list before displaying it. That means all children are rendered up front. This is fine for short lists. But when the item count grows? Performance takes a hit — especially when used inside another scrollable widget (like SingleChildScrollView).

ListView(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  children: [...],
)

In this setup, Flutter can’t lazily load items. Everything gets rendered at once — causing expensive build cycles, layout overdraw, and a sluggish UI.

⚙️ Enter SliverList + CustomScrollView

SliverList is part of Flutter’s sliver family — a set of widgets that render lazily and give you full control over complex scrolling behavior.

Here’s what a typical conversion looks like:

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return YourListItem(index);
        },
        childCount: 100,
      ),
    ),
  ],
)

No need for shrinkWrap. No layout bottlenecks. Just buttery-smooth scrolling, even with hundreds of items.

📊 shrinkWrap vs SliverList — A Visual Breakdown

Feature	shrinkWrap: true	SliverList
Rendering	All children at once	Lazy rendering (on scroll)
Performance with long lists	Sluggish & memory heavy	Smooth & optimized
Ideal for	Small, nested lists	Large or complex UIs
Used with	ListView, Column	CustomScrollView

🧠 When Should You Use Slivers?

✅ Use SliverList when:

You’re building infinite scrolls or long lists
You’re mixing multiple scrollable sections (lists, grids, headers)
You want smooth performance and precise layout control

❌ Avoid shrinkWrap: true in performance-sensitive lists or deeply nested layouts.

🔄 Real-World Example

Before (Using shrinkWrap):

SingleChildScrollView(
  child: Column(
    children: [
      Header(),
      ListView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        children: List.generate(50, (i) => ListTile(title: Text('Item $i'))),
      ),
    ],
  ),
)

After (Using SliverList):

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(child: Header()),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 50,
      ),
    ),
  ],
)

The result? Better scrolling, less memory pressure, and a future-proof architecture.

🎯 Final Thoughts

Using shrinkWrap: true might feel convenient, but as your app scales, it becomes a performance bottleneck. Slivers offer a cleaner, more performant way to build complex UIs in Flutter.

Don’t wait until your list lags — make the switch early, and you’ll thank yourself later.