How to marge two list tile in flutter? - flutter

Question

I am facing this issue while reading data from my real time data base but. I am storing the check in time in a list and check out time in another list but while scrolling i want to scroll them together to see the particular check in and check out time beside each other.
here is my code
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// ignore: prefer_const_literals_to_create_immutables
children: [
SizedBox(
height: 40,
),
Text(
// textAlign: TextAlign.center,
"Check In Time",
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
Expanded(
child: FirebaseAnimatedList(
query: ref,
itemBuilder:
(context, snapshot, animation, index) {
return ListTile(
leading: const Icon(Icons.flutter_dash_sharp),
title: Text(
textAlign: TextAlign.center,
snapshot.child('time').value.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
color: Colors.white,
),
),
);
},
),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// ignore: prefer_const_literals_to_create_immutables
children: [
// ignore: prefer_const_constructors
SizedBox(
height: 40,
),
Text(
"Check Out Time",
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
Expanded(
child: FirebaseAnimatedList(
query: ref2,
itemBuilder:
(context, snapshot, animation, index) {
return ListTile(
title: Text(
textAlign: TextAlign.center,
snapshot.child('time').value.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
color: Colors.white,
),
),
);
},
),
),
],
),
)
],
),
),
),
please help me to marge this animated list together.
I have tried to marge the list tile and animated list both separately but did't work. Is there any problem related with real time database as i am storing the check in and check out in separate list in the database.