Flutter动态调整文本适配Widget宽度问题求助

当前布局在iPad上显示正常，但iPhone上出现文本溢出，核心原因是小屏设备中左侧Expanded(flex:1)的宽度受限，现有布局的约束逻辑没有让文本正确适配容器宽度。以下是几种实用解决方案：

方案一：移除不必要的IntrinsicWidth #

IntrinsicWidth会强制子Widget取自身内容宽度，打破Expanded提供的父容器约束，导致FittedBox无法正确缩放文本。直接移除该组件即可让文本自适应父容器宽度：

SafeArea(
  child: Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Expanded(
        flex: 1,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          // 移除IntrinsicWidth，让Stack直接使用Expanded的宽度约束
          child: Stack(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  FittedBox(
                    fit: BoxFit.fitWidth,
                    child: Text(
                      _localeDate,
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  SizedBox(height: 20),
                  FittedBox(
                    fit: BoxFit.fitWidth,
                    child: Text(
                      _time,
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
              Container(
                alignment: Alignment.bottomCenter,
                child: _banner == null
                    ? Container()
                    : Container(height: 52, child: AdWidget(ad: _banner!)),
              ),
            ],
          ),
        ),
      ),
      Expanded(
        flex: 2,
        child: Image(fit: BoxFit.cover, image: NetworkImage(url)),
      ),
    ],
  ),
)

方案二：使用AutoSizeText精准控制文本大小 #

如果FittedBox的缩放效果不符合预期，可以用auto_size_text包实现更灵活的字号自动调整，支持设置最小/最大字号、限制行数：

1. 先在pubspec.yaml添加依赖：

dependencies:
  auto_size_text: ^3.0.0

2. 修改文本组件代码：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    AutoSizeText(
      _localeDate,
      style: TextStyle(color: Colors.white),
      maxLines: 1,
      minFontSize: 12, // 可根据需求调整最小字号
      overflow: TextOverflow.ellipsis,
    ),
    SizedBox(height: 20),
    AutoSizeText(
      _time,
      style: TextStyle(color: Colors.white),
      maxLines: 1,
      minFontSize: 12,
      overflow: TextOverflow.ellipsis,
    ),
  ],
)

方案三：给FittedBox添加强制宽度约束 #

如果必须保留IntrinsicWidth，可以给FittedBox外层套Container并设置宽度为double.infinity，强制它适应父容器宽度：

Container(
  width: double.infinity,
  child: FittedBox(
    fit: BoxFit.fitWidth,
    child: Text(
      _localeDate,
      style: TextStyle(color: Colors.white),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Tdayo