Add more fields after a listview.builder - dart

Question

I have a statefull layout with a listview.builder inside the builder I have a couple of expansionTile widgets
How do I show the entire list on the screen and add some textform widget below the list?
I have added a Expanded widget around the list to allow for more widgets below it but the list gets cut at a certain point where I want to show the entire list and then the text widgets after
class ContactUsScreen extends StatefulWidget {
const ContactUsScreen({Key? key}) : super(key: key);
static const String contactRouteName = "/contactScreen";
#override
State<ContactUsScreen> createState() => _ContactUsScreenState();
}
class _ContactUsScreenState extends State<ContactUsScreen> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Contact Us"),
centerTitle: true,
),
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: true,
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: salesList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 5,
child: ExpansionTile(
key: PageStorageKey<ContactPeople>(salesList[index]),
controlAffinity: ListTileControlAffinity.leading,
childrenPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
expandedCrossAxisAlignment: CrossAxisAlignment.end,
maintainState: true,
title: Text(
salesList[index].regionDescription,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
children: //[Text("Test")],
salesList[index].people!.map(
(peopleRecord) {
return ExpansionTile(
expandedCrossAxisAlignment: CrossAxisAlignment.start,
key: PageStorageKey<ContactUsScreen>(peopleRecord),
title: Align(
alignment: Alignment.topLeft,
child: Row(
children: [
ClipOval(
child: Image.asset(
"assets/images/people/${peopleRecord.avatarImage}",
fit: BoxFit.cover,
width: 60,
height: 60,
),
),
SizedBox(
width: 10,
),
Text(
peopleRecord.name,
style: const TextStyle(fontSize: 15),
),
],
),
),
children: [
Text(
peopleRecord.title,
style: const TextStyle(fontWeight: FontWeight.bold),
),
Text(peopleRecord.cellPhoneNumber),
Text(
peopleRecord.emailAddress,
),
const SizedBox(
height: 5,
),
],
);
},
).toList(),
),
),
);
}),
),
SizedBox(height: 15,),
Text("Contact us directly",
style: TextStyle(fontWeight: FontWeight.w700,
fontSize: 20,
color: Colors.black),),
Form(
key: formKey,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextFormField(controller: fullNameController,
keyboardType: TextInputType.text,
decoration: InputDecoration(labelText: "Full Name",
hintText: "Full Name",
),
validator: (inputFieldFullName)
{
if(inputFieldFullName!.isEmpty)
{
return "Please enter your Full Name";
}
else
{
return null;
}
},
),
TextFormField(controller: contactNumberController,
keyboardType: TextInputType.number,
decoration: InputDecoration(labelText: "Contact Number",
hintText: "Contact Number",
),
validator: (inputFieldContactNumber)
{
if(inputFieldContactNumber!.isEmpty)
{
return "Please enter your contact number";
}
else
{
return null;
}
},
),
SizedBox(height: 5,),
ElevatedButton(
onPressed: () {
if(formKey.currentState!.validate())
{
//Send the email
}
else
{
const SnackBar snackBar = SnackBar(duration: Duration(seconds: 2), content: Text("Please correct the errors"));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
},
child: Text("Submit"),
),
SizedBox(height: 20,),
],
),
),
),
//getContactForm(context, formKey),
],
),
)
],
)
),
);
}
}
The end result should be that we display the entire list of parent expansion tile, and then only after the textform fields
Regards

Answer 1

You have to use this structure:
CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ** first listview **
},
childCount: top.length,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ** second listview **
},
childCount: bottom.length,
),
),
],
),