Reputation: 31
@override
Widget build(BuildContext context) {
return Scaffold(
body: RefreshIndicator(
onRefresh: () async => refreshControllers(),
child: Stack(
children: [
Container(),
AssetImageWidget(
boxfit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
imagePath: IconFactory()
.getIcon(ref, AppIconsKey.iconDashboardToolBar.name),
),
const SizedBox(
height: 110,
width: double.infinity,
child: FittedBox(child: DashboardUserDetailView())),
Positioned(
top: 110,
child: SizedBox(
height: MediaQuery.of(context).size.height -
110 -
kBottomNavigationBarHeight,
width: MediaQuery.of(context).size.width,
child: CustomScrollView(
slivers: [
const SliverToBoxAdapter(
child: NamasteUserView(),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverHeaderDelegate(
minHeight: 52,
maxHeight: 52,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(52),
topRight: Radius.circular(52),
),
),
),
),
),
SliverToBoxAdapter(
child: Container(
color: Colors.black,
height: 100000,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Childrens here
],
),
),
),
],
),
),
)
],
),
),
);
}
class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
final double minHeight;
final double maxHeight;
final Widget child;
_SliverHeaderDelegate(
{required this.minHeight, required this.maxHeight, required this.child});
@override
double get minExtent => minHeight;
@override
double get maxExtent => maxHeight;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return child;
}
@override
bool shouldRebuild(_SliverHeaderDelegate oldDelegate) {
return oldDelegate.minHeight != minHeight ||
oldDelegate.maxHeight != maxHeight ||
oldDelegate.child != child;
}
}
I have a top section border radius on a SliverPersistentHeader, and it is a container with a white color. Only the radius section has a stack background. However, when I scroll, the container below, which has an xyz color, causes the section to turn black due to overlapping. How can I solve this?
I want the sliver box below the SliverPersistentHeader to not cause the color to be visible when scrolled and overlapped with the SliverPersistentHeader.
Note: I have to specify the color for the sliver box as xyz due to design constraints.*
Upvotes: 0
Views: 51