Flutter: ScrollSnapList-Item not shrinking - need dynamic sizing of elements - flutter

Question

I am building a horizontal ScrollSnapList. My problem is that I cannot shrink it on the y-axis to the size of the elements height. I tried to give a maxHeight with LimitedBox but the ScrollSnapList takes alle the vertical space available. I have also tried for test purposes to build it with a ListView.builder() - same result:
Hers is my Code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const AppBarProfile(),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 20,),
LimitedBox(
maxHeight: 140,
child:
ScrollSnapList(
shrinkWrap: true,
key: sslKey,
initialIndex: 0,
//shrinkWrap: true,,
//duration: 1,
scrollDirection: Axis.horizontal,
onItemFocus: (index){
_currentIndex = index;
},
itemSize: MediaQuery. of(context). size. width - 32,
itemBuilder: _buildItem,
itemCount: 10,
scrollPhysics: ClampingScrollPhysics(),
dynamicItemSize: true,
dynamicItemOpacity: 0.7,
dynamicSizeEquation: (distance) {
if (distance > 0){
return 1 - 0.1*distance /MediaQuery. of(context). size. width / 2;
}else{
return 1 + 0.1*distance /MediaQuery. of(context). size. width / 2 ;
}
},
),
),
Expanded(child: ListView(
children: [
Container(height: 200, color: Colors.black,),
],
))
],
),
);
}
Widget _buildItem(BuildContext context, int index) {
return
SizedBox(
width: MediaQuery. of(context). size. width - 32,
child: Item(),
);
}
}
Here is the code of the element being called:
class Item extends StatelessWidget {
const Item({Key? key,}) : super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
splashColor: Colors.transparent,
onTap: () {
},
child: Column(
children: [
const SizedBox(
height: 8,
),
Container(height:10, width: 20, color: Colors.black)
],
),
);
}
}
Result of code above
As you can see, the space around the items of ScrollSnapList is expanded to the size of the maxHeight of LimitedBox(). I placed another black container beneath to show that it is fully expanding. How do I fix this?

Answer 1

You can do a trick wrapping with Center widget.
Widget _buildEmployeeItem(BuildContext context, int index) {
return SizedBox(
width: MediaQuery.of(context).size.width - 32,
child: Center(
child: Container(
height: 10,
width: 20,
color: Colors.black,
),
),
);
}
You can find more about constraints