Overlap SliverList children in Flutter
1,894
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Test'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
child: Container(
child: Column(
children: <Widget>[
Container(
child: Text(
'Index is $index'.toUpperCase(),
),
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(bottom: 10.0),
),
Container(height: 200.0)
],
),
constraints: BoxConstraints.tightForFinite(width: 200),
decoration: BoxDecoration(
color: index % 2 == 0
? Color(0XFF45766E)
: Color(0XFFECB141),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0),
topRight: Radius.circular(40.0),
),
),
padding: EdgeInsets.only(
left: 20.0,
top: 10.0,
),
),
decoration: BoxDecoration(
//the only change required here
color: index % 2 == 0
? index == 0 ? Colors.white : Color(0XFFECB141)
: Color(0XFF45766E),
),
);
},
),
),
],
);
You just need to change explicitly for the first position.
Comments
-
tevvek over 1 year
Based on this design:
I am trying to use
SliverList
withSliverAppBar
but I can't seem to overlap the items so when the top left and top right radius are applied the color of the previous item is present. It's similar to this other post: How to overlap SliverList on a SliverAppBarBut I'm trying to apply the
Stack
to allSliverList
children. The best I accomplished so far is a workaround where I wrap the item in anotherContainer
and apply the previous background color:CustomScrollView( slivers: <Widget>[ SliverAppBar( title: Text('Test'), ), SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return Container( child: Container( child: Column( children: <Widget>[ Container( child: Text( 'Index is $index'.toUpperCase(), ), alignment: Alignment.centerLeft, padding: EdgeInsets.only(bottom: 10.0), ), Container(height: 200.0) ], ), constraints: BoxConstraints.tightForFinite(width: 200), decoration: BoxDecoration( color: index % 2 == 0 ? Color(0XFF45766E) : Color(0XFFECB141), borderRadius: BorderRadius.only( topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0), ), ), padding: EdgeInsets.only( left: 20.0, top: 10.0, ), ), decoration: BoxDecoration( color: index % 2 == 0 ? Color(0XFFECB141) : Color(0XFF45766E), ), ); }, ), ), ], );
Thank you!
-
Josteve about 4 yearsCan you please add a video clip of what you want to do?
-
-
tevvek about 4 yearsThis only works as a workaround, what I am trying to accomplish may be better explained with a comparison: the same way you can use the child builder to create an infinite list of items without explicitly saying how much (unless you use
childCount
), I want to infinitely create a list of custom widgets that are slightly overposed on top of each other, without specifying the height of the parentContainer
and without using the workaround. what I am actually trying to accomplish is to stack the list's children inside the delegate. If positioned is used then it needs an explicit height. -
tevvek about 4 yearsDoes this work? Because it's similar to something I did but the use of specific positioning e.g.
bottom: 0
breaks the code 'cause it needs to know the height it can grow up to as it tends to do so infinitely.