How to stack the items inside a "Listview.builder" on top of each other? flutter - flutter

Question

I want to stack the items inside a Listview.builder but when I try to do so with the Align() class and set its heightfactor: , it gives padding to the top and bottom and I don't want that, does anyone have any idea how do I stack them properly?
My center SyncfusionLinearGauge:
//Center SyncfusionLinearGauge
Expanded(
child: ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: _provider.loadedContestants.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
final data = _provider.loadedContestants[index];
return Align(
heightFactor: 0.0001,
child: SfLinearGauge(
// showLabels: false,
// showTicks: false,
// showAxisTrack: false,
axisLabelStyle: TextStyle(color: Colors.white),
majorTickStyle: LinearTickStyle(
color: Colors.white, length: 10),
minorTickStyle:
LinearTickStyle(color: Colors.white),
axisTrackStyle:
LinearAxisTrackStyle(color: Colors.red),
orientation: LinearGaugeOrientation.vertical,
minimum: 0,
maximum: 100,
animationDuration: 500,
markerPointers: [
//User pointer
LinearWidgetPointer(
value: data.points,
position: LinearElementPosition.cross,
offset: 50.0,
animationDuration: 2000,
child: UserCardWidget(
data: data,
),
),
],
),
);
},
),
),
My user card:
class UserCardWidget extends StatelessWidget {
UserCardWidget({Key key, this.data}) : super(key: key);
DemoUserModel data;
#override
Widget build(BuildContext context) {
bool _isKevinTeam = data.team == 'Kevin';
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 167.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
// mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 15,
height: 15,
decoration: BoxDecoration(
color: const Color(0xff2da162),
borderRadius: BorderRadius.all(
Radius.circular(50),
),
),
),
Card(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'${data.firstName.toString()}M',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
fontFamily: "SFProText",
fontStyle: FontStyle.normal,
fontSize: 13.0,
),
),
),
),
],
),
),
);
}
}
What I want:
What I have:

Answer 1

What I ended up doing was removing the listview.builder all together and mapped the list in the markerPointers:[], so this is the result.
My LinearGauge:
Expanded(
flex: 4,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: SizedBox(
height: size.height * 0.57,
child: SfLinearGauge(
showLabels: false,
showTicks: false,
showAxisTrack: false,
orientation: LinearGaugeOrientation.vertical,
minimum: 0,
maximum: 100,
animationDuration: 500,
markerPointers: _sortedList
.asMap()
.map(
(i, data) {
return MapEntry(
i++,
LinearWidgetPointer(
value: data.points,
position: LinearElementPosition.cross,
animationDuration: 2000,
offset: 500,
child: UserCardWidget(
data: data,
index: i,
isExpandedMethod: _isExpanded,
),
),
);
},
)
.values
.toList(),
),
),
),
],
),
),
This is the result: