Prevent ExpansionTile from expanding beyond viewport/screen - flutter

Question

I'm trying to build a screen where there are two lists containing items fetched from an API. I want to use an ExpansionTile for each list to present the data to the user so that the user can decide which data he wants to access.
As the data comes from an API it might be that the data present in a list is more than what fits on the screen, thus I'd like the ExpansionTile to be scrollable inside (I don't want the page to be scrollable but the ExpansionTile Widget!!!)
Currently if I expand the ExpansionTile this is the problem I'm facing if there's too much data to display within the ExpansionTile:
However, I'd like the UI to look something like this:
How can I limit the ExpansionTiles to the boundaries of the screen and force them to be scrollable if they overflow? Currently I use a ListView.builder and also tried nesting it inside a SingleChildScrollView but that didn't help.
This is how my code for this screen looks right now (which is only the inner part wrapped between the AppBar and BottomNavigationBar because they belong to the screen providing the PageView):
class MembershipScreen extends StatefulWidget {
const MembershipScreen({Key? key}) : super(key: key);
#override
_MembershipScreenState createState() => _MembershipScreenState();
}
class _MembershipScreenState extends State<MembershipScreen> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Center(
child: Container(
constraints: BoxConstraints(maxWidth: 500),
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Clubs',
style: kHeadingStyle,
),
SizedBox(
height: 20,
),
_buildMyClubs(),
SizedBox(
height: 20,
),
_buildAllClubs(),
],
),
),
),
);
}
Widget _buildMyClubs() {
return Container(
decoration: BoxDecoration(
color: kPrimarySwatch,
border: Border.all(
color: kSecondarySwatch,
width: 2,
),
borderRadius: BorderRadius.circular(25)
),
child: Theme(
data: ThemeData().copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
initiallyExpanded: false,
title: Text("My Clubs", style: kLabelStyle,),
children: [
SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("Test", style: kHintTextStyle,),
);
},
),
)
],
),
),
);
}
Widget _buildAllClubs() {
return Container(
decoration: BoxDecoration(
color: kPrimarySwatch,
border: Border.all(
color: kSecondarySwatch,
width: 2,
),
borderRadius: BorderRadius.circular(25)
),
child: Theme(
data: ThemeData().copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
initiallyExpanded: false,
title: Text("All Clubs", style: kLabelStyle,),
children: [
SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("Test", style: kHintTextStyle,),
);
},
),
)
],
),
),
);
}
}
I'd really appreciate any help as I don't have any idea what I could try to solve this issue now. If anything is still unclear please let me know and I will try to provide the missing information asap.