Flutter how to screen just list in a bottom sheet - flutter

Question

I am showing a simple list view builder in bottom sheet like this
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 16.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Select ',
style: new TextStyle(
fontSize: 16,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'Patient',
style: TextStyle(
fontSize: 16,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 13),
child: Container(
height: MediaQuery.of(context).size.height * 0.08,
width: MediaQuery.of(context).size.width * 0.92 ,
child: TextFormField(
onChanged: (value) {
},
onSaved: (value) {},
style: TextStyle(
fontSize: 15,
color: kPrimaryColor,
fontFamily: 'UbuntuRegular'),
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide:
const BorderSide(color: Color(0xffbdbdbd), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
enabledBorder: new OutlineInputBorder(
borderSide:
const BorderSide(color: Color(0xffbdbdbd), width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
filled: true,
hintStyle: new TextStyle(
color: Color(0xffbdbdbd), fontFamily: 'UbuntuRegular'),
hintText: "Search",
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: kPrimaryColor, width: 1),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
),
Container(
child: new ListView.builder(
itemCount: 8,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 10, left: 15, right: 15),
child: Container(
child: GestureDetector(
// onTap: widget.onPressed,
onTap: () {},
child: Stack(children: [
Container(
width: double.infinity,
padding: EdgeInsets.all(15.0),
margin: EdgeInsets.only(bottom: 15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
border: Border.all(
color: kPrimaryColor,
width: 1.0,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Name : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'Hamza Tariq',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Contact : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: '03323789263',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
],
),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Gender : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'Male',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular', color: textGreyColor)),
],
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Reg Date : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: '12-MAY-2021',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular',
color: textGreyColor)),
],
),
),
],
),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Patient ID : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'C-200',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular',
color: textGreyColor)),
],
),
),
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Email : ',
style: new TextStyle(
fontSize: 13,
fontFamily: 'PoppinsMedium')),
new TextSpan(
text: 'abc.33#hotmail.com',
style: TextStyle(
fontSize: 13,
fontFamily: 'PoppinsRegular',
color: textGreyColor)),
],
),
),
],
),
],
),
),
]),
),
),
);
},
)
,
)
],
),
);
}
);
The issue is when i scroll the search bar and my header is also scrolling because I add SingleChildScrollView on the whole bottom sheet. What I need to do is I need to just scroll the listView not the whole content inside the bottom sheet. If I remove SingleChildScrollView from the bottom sheet it's showing an overflow error. Need to know what can I do here so I can get a scrollable listView with a sticky search bar and header.

Answer 1

Remove SingleChildScrollView and add Expanded on ListView.builder like this:
Dartpad to run the code online.