行引起的Renderflex溢出

Question

我正在尝试实现简单的一两行文本。文本将具有开始文本，然后是图标，以及结束文本。由于样式不同，我正在使用带有文本，图标和文本小部件的行。我收到A RenderFlex overflowed by 16 pixels on the right.错误。我将行括起来灵活且已扩展，但仍然无法正常工作。我只想将文本放在行尾到下一行。

Container(
      padding: EdgeInsets.only(
        left: 20,
        right: 20,
      ),
      width: mdq.size.width,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(


              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    'Tap ',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                  Icon(Icons.add),
                  Text(
                    'on the right hand corner to start a new chat.',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: Text(
                'You can communicate with the user who have installed Just Meetups and Deals app',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 16,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: InkWell(
                onTap: () {},
                child: Text(
                  'Start communicating',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),

    );

Answer 1

使用Expanded小部件

Container(
      padding: EdgeInsets.only(
        left: 20,
        right: 20,
      ),
      width: MediaQuery.of(context).size.width,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    'Tap ',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                  Icon(Icons.add),
                  Expanded(
                  child: Text(
                    'on the right hand corner to start a new chat.',
                    style: TextStyle(
                      fontSize: 17,
                    ),
                  ),
                  )
                ],
              ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: Text(
                'You can communicate with the user who have installed Just Meetups and Deals app',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 16,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(
                vertical: 15,
              ),
              child: InkWell(
                onTap: () {},
                child: Text(
                  'Start communicating',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),

    ),

Here's a codepen of it working

Answer 2

您不必对列中的行使用[flexed，例如[Expanded，Flexible等]，因为行默认使用按列提供的最大宽度

您遇到错误，因为您的行子宽度大于可用的屏幕尺寸

• 您可以对扩展的行中的大宽度子项使用扩展，以将子级以可用宽度包装在一行中。