Slivers (SliverList, SliverGrid, SliverAppBar) in Flutter - Build, Publish & Deploy

Build & Publish - Slivers (SliverList, SliverGrid, SliverAppBar)

Performance Impact

Slivers in Flutter help build scrollable areas efficiently by creating only visible parts of the UI. This means your app can maintain smooth 60fps scrolling even with large lists or grids. Using SliverList or SliverGrid reduces memory use because off-screen items are not built until needed. The SliverAppBar can expand and collapse smoothly without blocking the main thread, helping keep animations fluid and battery-friendly.

Optimization Tips

To keep 60fps with slivers, avoid heavy widgets inside list or grid items. Use const widgets where possible to reduce rebuilds. Use SliverChildBuilderDelegate for lazy building of list/grid items instead of building all at once. Keep the SliverAppBar simple and avoid complex animations inside it. Profile your app with Flutter DevTools to spot jank and optimize expensive builds.

App Size and Startup Time

Using slivers does not significantly increase your app bundle size because they are part of Flutter's core widgets. However, complex item widgets inside slivers can increase size if they include many assets or dependencies. Startup time is mostly unaffected by slivers themselves but can be impacted if you preload large data sets for the lists or grids. Lazy loading with slivers helps keep initial load fast.

iOS vs Android Differences

Flutter slivers behave consistently on iOS and Android because Flutter renders UI itself. However, platform differences appear in scrolling physics: iOS uses bouncing scroll behavior, Android uses edge glow. SliverAppBar respects these platform scroll behaviors automatically. Performance is similar on both platforms, but testing on real devices is recommended to catch platform-specific frame drops.

Store Review Guidelines

Both Apple App Store and Google Play require smooth, responsive UI without crashes or freezes. Using slivers helps meet these guidelines by enabling efficient scrolling and reducing memory use. Ensure your app handles accessibility well, including proper labels and focus order in scrollable areas. Avoid excessive memory use in large lists to prevent app termination by the OS. Follow platform-specific UI guidelines for navigation and app bars.

Self-Check: Slow Screen Load

If your screen with slivers takes 5 seconds to load, likely causes include building too many widgets at once instead of lazy loading, heavy widgets inside list/grid items, or expensive computations during build. Check if you are using SliverChildListDelegate with many children instead of SliverChildBuilderDelegate. Use Flutter DevTools to profile widget build times and optimize accordingly.

Key Result

Flutter slivers enable smooth, memory-efficient scrolling by lazily building visible UI parts, helping maintain 60fps and reducing memory use. Proper use of SliverList, SliverGrid, and SliverAppBar supports responsive apps that meet store guidelines on both iOS and Android.

Practice

1. What is the main purpose of using SliverAppBar in a Flutter app?

easy

A. To replace the default app bar with a static title

B. To display a fixed footer at the bottom of the screen

C. To create a grid layout inside a scrollable area

D. To create a header that can expand, collapse, and stay visible when scrolling

Solution

1. Step 1: Understand SliverAppBar role

   SliverAppBar is designed to create headers that can expand and collapse as the user scrolls.

2. Step 2: Compare options with SliverAppBar behavior

   Only To create a header that can expand, collapse, and stay visible when scrolling describes the expandable and pinned header behavior of SliverAppBar.

3. Final Answer:

   To create a header that can expand, collapse, and stay visible when scrolling -> Option D

4. Quick Check:

   SliverAppBar = expandable header [OK]

Hint: Remember: SliverAppBar controls flexible headers [OK]

Common Mistakes:

• Confusing SliverAppBar with fixed AppBar
• Thinking SliverAppBar creates grids or lists
• Assuming SliverAppBar is a footer widget

2. Which of the following is the correct way to create a SliverList inside a CustomScrollView?

easy

A. SliverList(items: List.generate(5, (index) => Text('Item $index')))

B. SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index')))

C. SliverList(itemBuilder: (context, index) => Text('Item $index'))

D. SliverList(children: [Text('Item 1'), Text('Item 2')])

Solution

1. Step 1: Recall SliverList constructor

   SliverList requires a delegate parameter, usually SliverChildBuilderDelegate or SliverChildListDelegate.

2. Step 2: Check each option's syntax

   SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'))) correctly uses delegate: SliverChildBuilderDelegate. Options A, B, and C use invalid parameters or properties.

3. Final Answer:

   SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'))) -> Option B

4. Quick Check:

   SliverList needs delegate = SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text('Item $index'))) [OK]

Hint: SliverList always needs a delegate parameter [OK]

Common Mistakes:

• Using children instead of delegate
• Using itemBuilder directly on SliverList
• Passing items instead of delegate

3. Given the code snippet below, what will be displayed on the screen?

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 100,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(title: Text('Hello')),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 3,
      ),
    ),
  ],
)

medium

A. A scrollable view with a pinned app bar titled 'Hello' and 3 list items labeled Item 0 to Item 2

B. A static app bar with title 'Hello' and 3 buttons labeled Item 1 to Item 3

C. An error because SliverAppBar cannot be pinned

D. A scrollable grid with 3 items and no app bar

Solution

1. Step 1: Analyze SliverAppBar properties

   The app bar is pinned and has a flexible space with title 'Hello', so it stays visible when scrolling.

2. Step 2: Analyze SliverList delegate

   The list builds 3 items labeled 'Item 0', 'Item 1', and 'Item 2'.

3. Final Answer:

   A scrollable view with a pinned app bar titled 'Hello' and 3 list items labeled Item 0 to Item 2 -> Option A

4. Quick Check:

   Pinned SliverAppBar + SliverList with 3 items = A scrollable view with a pinned app bar titled 'Hello' and 3 list items labeled Item 0 to Item 2 [OK]

Hint: Pinned SliverAppBar stays visible; SliverList shows items lazily [OK]

Common Mistakes:

• Thinking pinned means static, not scrollable
• Confusing list items count or labels
• Assuming SliverAppBar cannot be pinned

4. Identify the error in the following Flutter code snippet using slivers:

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      children: List.generate(4, (index) => Container(color: Colors.blue)),
    ),
  ],
)

medium

A. List.generate cannot be used inside SliverGrid

B. SliverGridDelegateWithFixedCrossAxisCount is not a valid class

C. SliverGrid requires a delegate, not a children parameter

D. CustomScrollView cannot contain SliverGrid

Solution

1. Step 1: Check SliverGrid constructor requirements

   SliverGrid requires a delegate parameter, not children.

2. Step 2: Validate other parts

   SliverGridDelegateWithFixedCrossAxisCount is valid, and List.generate can be used inside a delegate.

3. Final Answer:

   SliverGrid requires a delegate, not a children parameter -> Option C

4. Quick Check:

   SliverGrid needs delegate, not children [OK]

Hint: SliverGrid uses delegate, not children, for lazy loading [OK]

Common Mistakes:

• Using children instead of delegate in SliverGrid
• Confusing SliverGridDelegateWithFixedCrossAxisCount as invalid
• Thinking CustomScrollView disallows SliverGrid

5. You want to create a scrollable screen with a header that expands and pins, followed by a grid of images with 3 columns, and then a list of text items. Which of the following is the best way to structure your Flutter widget tree?

hard

A. CustomScrollView(slivers: [SliverAppBar(pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar(title: Text('Gallery'))), SliverGrid(delegate: SliverChildBuilderDelegate((c, i) => Image.network(urls[i]), childCount: urls.length), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)), SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text(items[i])), childCount: items.length))])

B. ListView(children: [AppBar(title: Text('Gallery')), GridView.count(crossAxisCount: 3, children: images), ListView(children: texts)])

C. CustomScrollView(children: [SliverAppBar(), SliverGrid(), SliverList()])

D. Column(children: [SliverAppBar(), SliverGrid(), SliverList()])

Solution

1. Step 1: Identify correct widget for scrollable slivers

   CustomScrollView with slivers parameter is needed to combine SliverAppBar, SliverGrid, and SliverList.

2. Step 2: Check each option's structure

   CustomScrollView(slivers: [SliverAppBar(pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar(title: Text('Gallery'))), SliverGrid(delegate: SliverChildBuilderDelegate((c, i) => Image.network(urls[i]), childCount: urls.length), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)), SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text(items[i])), childCount: items.length))]) correctly uses CustomScrollView with slivers and proper delegates. ListView(children: [AppBar(title: Text('Gallery')), GridView.count(crossAxisCount: 3, children: images), ListView(children: texts)]) uses nested scrollables incorrectly. CustomScrollView(children: [SliverAppBar(), SliverGrid(), SliverList()]) uses children instead of slivers. Column(children: [SliverAppBar(), SliverGrid(), SliverList()]) uses Column which cannot host slivers.

3. Final Answer:

   CustomScrollView with SliverAppBar, SliverGrid, and SliverList using delegates -> Option A

4. Quick Check:

   Use CustomScrollView with slivers and delegates = CustomScrollView(slivers: [SliverAppBar(pinned: true, expandedHeight: 200, flexibleSpace: FlexibleSpaceBar(title: Text('Gallery'))), SliverGrid(delegate: SliverChildBuilderDelegate((c, i) => Image.network(urls[i]), childCount: urls.length), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3)), SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text(items[i])), childCount: items.length))]) [OK]

Hint: Use CustomScrollView with slivers and delegates for mixed scroll content [OK]

Common Mistakes:

• Using ListView or Column instead of CustomScrollView for slivers
• Passing slivers as children instead of slivers parameter
• Not using delegates for SliverGrid and SliverList