TextWidget溢出，并且以下元素在行小部件抖动中不可见

Question

我正在尝试如下创建窗口小部件：

但是小部件如下所示溢出：

当文本长度增加时，会发生溢出。所有的小部件，例如“ Answered”，“ 1月29日”，都不在用户界面范围之内。

我已经尝试如下：

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          children: <Widget>[
            SizedBox(
              child: Text(
                "Tim Helmen James Bond Claffer Syllabus Mark Anthony",
                style: TextStyle(
                fontSize: 11.0,
                fontWeight: FontWeight.bold,
                color: ScreenColor.alreadyHaveAnAccountColor),
                overflow: TextOverflow.ellipsis,
                maxLines: 2,
              ),
            ),
            SizedBox(
              width: 4.0,
            ),
            Text(
                    "Answered",
                    style: TextStyle(
                      fontSize: 11.0,
                      fontWeight: FontWeight.w400,
                      color: ScreenColor.alreadyHaveAnAccountColor,
                    ),
                  )
             ,
             Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),
                    child: SizedBox(
                      width: 5.0,
                      height: 5.0,
                      child: Container(
                        color: ScreenColor.inputFieldBorderColor,
                      ),
                    ),
                  ),
                Text(
                    "Jan 20",
                    style: TextStyle(
                      fontSize: 11.0,
                      fontWeight: FontWeight.normal,
                      color: ScreenColor.inputFieldPlaceholderColor,
                    ),
                  ),
          ],
        ),
        SizedBox(
           height: 4.0,
         ),

        Row(
                children: <Widget>[
                  SizedBox(
                    child: Text(
                      "Doctor @ Kind Abdullah Specialist Children Hosptial",
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  SizedBox(
                    width: 8.0,
                  ),
                  Image.asset('assets/images/icon-verified.png'),
                ],
              ),
      ],
    );

Answer 1

尝试使用Expanded吗？在我的情况下有效

Expanded(
              child: Text(
                "Tim Helmen James Bond Claffer Syllabus Mark Anthony",
                style: TextStyle(
                fontSize: 11.0,
                fontWeight: FontWeight.bold,
                color: ScreenColor.alreadyHaveAnAccountColor),
                overflow: TextOverflow.ellipsis,
                maxLines: 2,
              ),
            ),

Answer 2

您可以使用auto_size_text来减少文本溢出时字体的大小。

此外，您可以为该文本小部件设置maxLines属性，并将overflow属性设置为TextOverflow.ellipsis.