******Обновлять ********
Вот обновленный body
, который решил проблему прокрутки, как указано ранее, но теперь получает A RenderFlex overflowed by 620 pixels on the bottom
. Я заменил body: listView
на body: Column
. Я знаю, что это очень распространенная проблема, и согласно logcat решение состоит в том, чтобы обернуть контент в виджет Expanded
. В моем случае я хотел бы знать, где использовать расширенный виджет для решения проблемы.
Widget reviewsSection = Container(
child: FutureBuilder(
future: _fetchReviews(),
builder: (context, snapshot) {
if (snapshot.data != null) {
return _buildReviewTiles(snapshot.data);
} else if (snapshot.hasError) {
return Text('${snapshot.error}',
style: TextStyle(color: Colors.black, fontSize: 12.0),
textAlign: TextAlign.justify);
}
// By default, show a loading spinner
return new Container(child: new CircularProgressIndicator());
}));
// Creates a list view based on the reviews in the reviewList.
Widget _buildReviewTiles(List<Review> list) {
return (new Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: reviewList == null ? 0 : reviewList.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: Center(
child: Column(children: <Widget>[
_getReviewTile(reviewList[index]),
new Padding(
padding: EdgeInsets.all(5.0),
),
new Divider(
height: 3.0,
color: Colors.black26,
)
])));
}),
));
}
// Returns a list tile representation of a review
Widget _getReviewTile(Review review) {
// Keep only the day, month, and year
var date = review.created.split(" ")[0];
return new Container(
color: Colors.yellow,
child: new Row(
children: <Widget>[
new Expanded(
child: ListTile(
leading: new Column(children: <Widget>[
const Icon(Icons.stars),
]),
subtitle: new Text(
'${review.review}',
style: TextStyle(color: Colors.black, fontSize: 14.0),
),
title: new Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(date, style: new TextStyle(fontSize: 12.0)),
new Padding(
padding: EdgeInsets.all(4.0),
),
],
),
),
new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new StarRating(
starCount: 5,
rating: review.rating + 0.0,
color: Colors.amber,
),
]),
],
),
),
),
],
),
);
}
Это мой код Scaffold
, который использует reviewsSection
вместе с другими разделами:
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: FadeInImage.assetNetwork(
placeholder: 'assets/header_bg.png',
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
image: 'https:' + pro.profilePhoto),
),
),
];
},
body: Column(
children: <Widget>[
new Container(
color: Colors.black87,
child: Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: new EdgeInsets.fromLTRB(5.0, 8.0, 10.0, 5.0),
),
new Text(
'${pro.fullname}',
style: TextStyle(fontSize: 18.0, color: Colors.white),
),
new Text(
'${pro.company}',
style: TextStyle(fontSize: 14.0, color: Colors.white),
),
Padding(
padding: EdgeInsets.all(5.0),
)
],
),
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: new EdgeInsets.fromLTRB(5.0, 8.0, 10.0, 5.0),
),
new StarRating(
starCount: 5,
rating: pro.rating,
color: Colors.amber,
),
new Text(
'${pro.reviewCount} reviews',
style: TextStyle(fontSize: 14.0, color: Colors.white),
),
Padding(
padding: EdgeInsets.all(5.0),
)
],
),
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
buttonSection,
Padding(
padding: EdgeInsets.all(2.0),
),
Divider(color: Colors.black26, height: 0.5),
Padding(
padding: EdgeInsets.all(4.0),
),
experienceSection,
Padding(
padding: EdgeInsets.all(8.0),
),
reviewsSection
],
),
),
);
}
Удалить Container
из метода _buildReviewTiles
? или от reviewsSection
? Я пробовал это в _buildReviewTiles
, но результат тот же. Без прокрутки. @AndreyTurkovsky
Вставьте еще код - где вы используете reviewsSection
?
Обновил мой исходный вопрос дополнительным кодом. @AndreyTurkovsky
Думаю, я смог отчасти разобраться в проблеме. Это body: listView
в Scaffold
. Я заменил его listView
на Column
, и теперь он прокручивается, но теперь появляется новая проблема - A RenderFlex overflowed by 620 pixels on the bottom.
.
Попробуйте Wraping - reviewsSection в Expanded и удалите контейнеры вокруг FutureBuilder и ListViewBuilder
Потрясающе ... упаковка reviewsSection
в Expanded
работала отлично ... почему-то я не подумал о том, чтобы посмотреть на reviewsSection
, и подумал, что он должен что-то делать с nestedScrollView
.. @ anmol.majhail
Я повторно отправляю ответ, предложенный @ anmol.majhail, который помог мне решить проблему.
«Попробуйте обернуть - reviewsSection в Expanded. & Удалите контейнеры вокруг FutureBuilder и ListViewBuilder»
Итак, исправленный код reviewsSection
, который работал:
Widget reviewsSection = Expanded(
child: FutureBuilder(
future: _fetchReviews(),
builder: (context, snapshot) {
if (snapshot.data != null) {
return _buildReviewTiles(snapshot.data);
} else if (snapshot.hasError) {
return Text('${snapshot.error}',
style: TextStyle(color: Colors.black, fontSize: 12.0),
textAlign: TextAlign.justify);
}
// By default, show a loading spinner
return Center(child: CircularProgressIndicator());
}));
Зачем вам нужно оборачивать список в контейнере? Попробуйте удалить
Container