#flutter #dart
Вопрос:
Я показываю простой конструктор представления списка на нижнем листе, как это
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)),
],
),
),
],
),
],
),
),
]),
),
),
);
},
)
,
)
],
),
);
}
);
Проблема в том, что я прокручиваю строку поиска, и мой заголовок также прокручивается, потому что я добавляю SingleChildScrollView на весь нижний лист. Что мне нужно сделать, так это просто прокрутить представление списка, а не все содержимое на нижнем листе. Если я удалю SingleChildScrollView с нижнего листа, он покажет ошибку переполнения. Нужно знать, что я могу здесь сделать, чтобы получить прокручиваемый список с липкой строкой поиска и заголовком.
Ответ №1:
Удалите SingleChildScrollView и добавьте Expanded ListView.builder вот так:
Dartpad для запуска кода в Интернете.