Flutter 行导致的Renderflex溢出

我试图实现简单的一行两行文本。 文本将有一个开始文本，然后是图标和结束文本。由于不同的样式，我使用了文本、图标和文本窗口小部件的行。 我得到一个RenderFlex，右边溢出了16个像素。错误。 我将行括在灵活和扩展中，但仍然不起作用。我只想把文本放在下一行的末尾

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

    );

容器(
填充：仅限边缘设置(
左:20,，
右:20,，
),
宽度：mdq.size.width，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
扩大(
孩子：排(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
正文(
"水龙头",，
样式：TextStyle(
尺寸：17，
),
),
图标（Icons.add），
正文(
“在右角开始新的聊天。”，
样式：TextStyle(
尺寸：17，
),
),
],
),
),
容器(
边距：边缘组。对称(
垂直：15，
),
子：文本(
“您可以与只安装了Meetups和Deals应用程序的用户通信”，
样式：TextStyle(
颜色：颜色。灰色，
尺寸：16，
),
),
),
容器(
边距：边缘组。对称(
垂直：15，
),
孩子：InkWell(
onTap:（）{}，
子：文本(
“开始沟通”，
textAlign:textAlign.left，
样式：TextStyle(
颜色：颜色，蓝色，
尺寸：20，
fontWeight:fontWeight.bold，
),
),
),
),
],
),
);

使用扩展的

小部件

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

    ),

容器(
填充：仅限边缘设置(
左:20,，
右:20,，
),
宽度：MediaQuery.of（context）.size.width，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
正文(
"水龙头",，
样式：TextStyle(
尺寸：17，
),
),
图标（Icons.add），
扩大(
子：文本(
“在右角开始新的聊天。”，
样式：TextStyle(
尺寸：17，
),
),
)
],
),
容器(
边距：边缘组。对称(
垂直：15，
),
子：文本(
“您可以与只安装了Meetups和Deals应用程序的用户通信”，
样式：TextStyle(
颜色：颜色。灰色，
尺寸：16，
),
),
),
容器(
边距：边缘组。对称(
垂直：15，
),
孩子：InkWell(
onTap:（）{}，
子：文本(
“开始沟通”，
textAlign:textAlign.left，
样式：TextStyle(
颜色：颜色，蓝色，
尺寸：20，
fontWeight:fontWeight.bold，
),
),
),
),
],
),
),

您不需要对列中的行使用任何类似[Expanded，flex，etc]的flex，因为默认情况下，行采用列的最大可用宽度

您收到错误，因为您的行子宽度大于可用屏幕大小


您可以在Expanded中对宽度较大的行的子行使用Expanded，将子行以可用宽度包装在行中
正如我提到的，我尝试了扩展，但它不起作用。我正在更新小部件tree@BilalRabbi我已经更新了我的答案，请检查这是否是您需要的抱歉，先生，不完全是因为它将父列的第二个子列推到了底部，+图标之后的文本与第一个文本不一致。我正试图创建whatsapp屏幕的模型，但用户尚未联系任何人。您需要进一步描述您的问题，我认为问题在于您的文本溢出，如果有帮助，请在op中发布一个图像。StreamBuilder中的ListView.builder只是脚手架主体中的一个ListView.builder