Как решить “RenderFlex переполнен справа”. ошибка в строке?

#flutter

#flutter

Вопрос:

Я получаю сообщение об ошибке в виджете строки. Как я могу это исправить?

введите описание изображения здесь

 Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(20.0),
        child: Row( // error is shown on this line
          children: [
            const Image(
              height: 120,
              width: 120,
              image: NetworkImage(...),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Wrap(
                spacing: 5.0,
                runSpacing: 5.0,
                direction: Axis.vertical,
                children: [
                  Text('Message:'),
                  Text('Hello world! How are you doing?'),
                ],
              ),
            )
          ],
        ),
      ),
    ],
),
  

RenderFlex переполнен на 16 пикселей справа.

Комментарии:

1. использовать Expanded вместо Wrap ? Нравится Expanded > Text

2. @pskink также должны быть другие текстовые виджеты, поэтому я использовал Wrap

Ответ №1:

Expanded Виджет поверх Padding сделает все за вас

 Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(0.0),
            child: Row(
              // error is shown on this line
              children: [
                Image(
                  height: 120,
                  width: 120,
                  image: NetworkImage(""),
                ),
                Expanded(
                    child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Wrap(
                    spacing: 5.0,
                    runSpacing: 5.0,
                    direction: Axis.vertical,
                    children: [
                      Text('Message:'),
                      Text(
                          'Hello world! How are you doing?',),
                    ],
                  ),
                ))
              ],
            ),
          ),
        ],
      ),
  

Ответ №2:

Вам нужно искать ключ к этим ошибкам. Здесь 16 пикселей пытается рассказать нам о проблеме. Я не пробовал, но я предполагаю, что заполнение вызывает это переполнение. Попробуйте изменить заполнение следующим образом:

 
Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(20.0),
        child: Row( // error is shown on this line
          children: [
            const Image(
              height: 120,
              width: 120,
              image: NetworkImage(...),
            ),
            Padding(
              // Change this!
              padding: EdgeInsets.fromLTRB(0,8,0,8),
              child: Wrap(
                spacing: 5.0,
                runSpacing: 5.0,
                direction: Axis.vertical,
                children: [
                  Text('Hello world! How are you doing?'),
                ],
              ),
            )
          ],
        ),
      ),
    ],
),

  

Комментарии:

1. это не работает. когда текстовая строка становится шире, ошибка возникает снова