RenderFlex переполнен на 620 пикселей внизу

******Обновлять ********

Вот обновленный 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
          ],
        ),
      ),
    );
  }

RenderFlex переполнен на 620 пикселей внизу

Зачем вам нужно оборачивать список в контейнере? Попробуйте удалить Container

Andrey Turkovsky 24.10.2018 08:42

Удалить Container из метода _buildReviewTiles? или от reviewsSection? Я пробовал это в _buildReviewTiles, но результат тот же. Без прокрутки. @AndreyTurkovsky

Darshan 24.10.2018 08:56

Вставьте еще код - где вы используете reviewsSection?

Andrey Turkovsky 24.10.2018 09:03

Обновил мой исходный вопрос дополнительным кодом. @AndreyTurkovsky

Darshan 24.10.2018 09:07

Думаю, я смог отчасти разобраться в проблеме. Это body: listView в Scaffold. Я заменил его listView на Column, и теперь он прокручивается, но теперь появляется новая проблема - A RenderFlex overflowed by 620 pixels on the bottom..

Darshan 24.10.2018 09:37

Попробуйте Wraping - reviewsSection в Expanded и удалите контейнеры вокруг FutureBuilder и ListViewBuilder

anmol.majhail 24.10.2018 12:56

Потрясающе ... упаковка reviewsSection в Expanded работала отлично ... почему-то я не подумал о том, чтобы посмотреть на reviewsSection, и подумал, что он должен что-то делать с nestedScrollView .. @ anmol.majhail

Darshan 24.10.2018 13:33
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
7
6 755
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я повторно отправляю ответ, предложенный @ 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());
            }));

Другие вопросы по теме