flutter - 如何解决 Row 中的 “A RenderFlex overflowed on the right.” 错误？

Question

我在 Row 小部件上收到错误消息。
我该如何解决？

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?'),
                ],
              ),
            )
          ],
        ),
      ),
    ],
),

A RenderFlex overflowed by 16 pixels on the right.

Answer 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?',),
                    ],
                  ),
                ))
              ],
            ),
          ),
        ],
      ),