How to overlap items in a ListView? - flutter

Question

I would like to have a drop shadow on each item and each item should overlap the top of the next sibling.

Answer 1

It's probably too late for the original poster, but maybe it will help someone else looking for this:
The best solution I found to this (without resorting to a manually managed stack) is to use an Align widget with a height factor of less than 1. This will cause the next item to overlap with the previous one.
Here are the key elements to make this work:
final elements = ['A', 'B', 'C'];
final padExtend = 16.0;
final media = MediaQuery.of(context);
return ListView.builder(
itemCount: elements.length,
itemBuilder: (BuildContext context, int index) {
final String content = elements[index];
return Align(
child: Container(
width: media.size.width - padExtend / 2.0,
padding: EdgeInsets.all(padExtend),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.grey, spreadRadius: 3, blurRadius: 3, offset: Offset(2, 1)),
],
color: Colors.white,
),
child: Text(content),
),
alignment: Alignment.topCenter,
heightFactor: 0.9,
);
},
);
Since the align would center the elements, a media query is used to set a fixed width.

Answer 2

Wraping your elements with OverflowBox and giving the maxHeight value will achieve this effect.
return SizedBox(
height: 35, //--> list children will be 35 in height
child: OverflowBox(
maxHeight: 50, // --> allowing the child to overflow will cause overlap between elements
child: Container(
height: 50,
child: Text((index + 1).toString()),
),
),
);

Answer 3

use SizedOverflowBox (preferred) or OverflowBox, it is very easy to implement such effects... Flutter YYDS

Answer 4

You could try my package (signed_spacing_flex). It's exactly the same as a normal Column (or Row and Flex). But it lets you set negative spacing which causes its children to overlap.
You can also set which children should be on top when they overlap.
It works with expanded children if you need.

Answer 5

You can use a elevation and padding top to achieve the effect you want :
ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext content, int index) {
return Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Material(
elevation: 5.0,
child: new Container(
height: 100.0,
),
),
);
})
If you want to overlap your items just use a heightFactor below 1.0
return Align(
alignment: Alignment.topLeft,
heightFactor: 0.9,
child: your item...