[Flutter] How to Apply a Single Background Image Across Multiple Slivers in Flutter...

I’m working with a CustomScrollView in Flutter that has multiple slivers, and I need to apply a single background image across the first three slivers only. Here’s the specific setup I’m trying to achieve:

One background image should cover the first three slivers. The second sliver should be sticky and contain a TabBar. The rest of the slivers (a SliverGrid and SliverList) should not show the background image. I initially tried wrapping the first three slivers in a Stack and Column with an Image.asset as the background, but I ran into this error:

A RenderFlex expected a child of type RenderBox but received a child of type _RenderSliverPinnedPersistentHeaderForWidgets.



import 'package:flutter/material.dart';

class CustomSliverBackgroundPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// Background image covering the first three slivers
Positioned.fill(
child: Image.asset(
'assets/your_image.png',
fit: BoxFit.cover,
),
),

// CustomScrollView with slivers
CustomScrollView(
slivers: [
// First Sliver (non-sticky) with transparent background
SliverToBoxAdapter(
child: Container(
height: 200,
color: Colors.transparent,
child: Center(child: Text('Sliver 1', style: TextStyle(color: Colors.white))),
),
),

// Sticky Second Sliver with Tabs
SliverPersistentHeader(
pinned: true,
delegate: _SliverTabBarDelegate(
TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
),

// Third Sliver (non-sticky) with transparent background
SliverToBoxAdapter(
child: Container(
height: 200,
color: Colors.transparent,
child: Center(child: Text('Sliver 3', style: TextStyle(color: Colors.white))),
),
),

// Remaining Slivers (without background)
SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
color: Colors.blue[(index % 9) * 100],
child: Center(child: Text('Grid Item $index')),
),
childCount: 8,
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childAspectRatio: 2,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text('List Item $index'),
),
childCount: 10,
),
),
],
),
],
),
);
}
}

// Custom delegate to create sticky tab behavior in second sliver
class _SliverTabBarDelegate extends SliverPersistentHeaderDelegate {
final TabBar tabBar;

_SliverTabBarDelegate(this.tabBar);

@override
double get minExtent => tabBar.preferredSize.height;
@override
double get maxExtent => tabBar.preferredSize.height;

@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: Colors.transparent, // Make transparent to show background image
child: tabBar,
);
}

@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}



With this setup, I want the background image to span the first three slivers, including the sticky second sliver with the TabBar. However, the image doesn’t appear correctly across all three slivers, and I get rendering issues.

How can I achieve a single background image covering only the first three slivers while keeping the sticky TabBar in the second sliver? Any help would be greatly appreciated!

However, with this setup, the background image doesn’t appear under the 2nd and 3rd slivers as expected. I need the background to be visible under all three slivers while ensuring the sticky behavior for the TabBar in the second sliver. How can I achieve this? Any advice or suggestions would be much appreciated!

Continue reading...