Flutter AnimatedCrossFade发布模式不显示文本仅灰色背景问题求助

以下代码在调试模式下运行正常，但发布模式中描述文本消失，仅显示灰色背景，求解决方法。

AnimatedContainer(
  duration: const Duration(milliseconds: 200),
  curve: Curves.easeIn,
  height: expandedStatus[index] ? 300 : 160,
  decoration: BoxDecoration(
    boxShadow: const [
      BoxShadow(
        color: Color.fromARGB(168, 97, 97, 97),
        offset: Offset(2,2),
        blurRadius: 3,
        spreadRadius: 1,
      )
    ],
    color: Theme.of(context).primaryColor,
    borderRadius: BorderRadius.circular(20),
  ),
  padding: EdgeInsets.all(20),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: MediaQuery.of(context).size.width - 130,
            child: Text(list[newIndex]['title'], style: _textTheme.headline6)
          ),
          InkWell(
            onTap: () async {
                expandedStatus.removeAt(newIndex);
                int i = await DatabaseClass.instance
                    .delete(list[newIndex]['url']);
                displayNews();
              },
            child: Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: Colors.pink,
                borderRadius: BorderRadius.circular(50)
              ),
              child: const Icon(Icons.delete_outline_outlined)
            )
          )
        ],
      ),
      const SizedBox(height: 10),
      Align(
        alignment: Alignment.centerRight,
        child: Text(
          list[newIndex]['date'],
          style: _textTheme.subtitle2,
        ),
      ),
      const SizedBox(height: 10),
      AnimatedCrossFade(
        firstChild: Text("", style: TextStyle(fontSize: 0)),
        secondChild: (list[newIndex]['_description'] != "")  
            ? Flexible(
                child: Text(
                  list[newIndex]['_description'].substring(0, list[newIndex]['_description'].length - 14), 
                  overflow: TextOverflow.ellipsis,
                  maxLines: 5,
                  style: _textTheme.subtitle1,
                )
              ) 
            : Text("Content Unavailable", style: _textTheme.subtitle1),
        crossFadeState: !expandedStatus[index] ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        reverseDuration: Duration.zero,
        sizeCurve: Curves.fastLinearToSlowEaseIn,
        duration: const Duration(milliseconds: 800)
      )
    ],
  ),
)

发布模式截图 #

调试模式截图 #

问题排查与解决方案 #

1. 空文本组件的布局优化问题 #

发布模式下Flutter会对无意义组件做优化，你用Text("", style: TextStyle(fontSize: 0))作为firstChild，可能被优化后导致布局计算异常。建议替换为明确的空容器：

firstChild: const SizedBox.shrink(),

2. 字符串截断越界异常 #

发布模式默认关闭异常捕获，当list[newIndex]['_description']长度小于14时，substring(0, length-14)会抛出范围错误，导致组件渲染失败（灰色背景是错误边界的默认表现）。需要先做长度判断：

// 替换secondChild中的文本截断逻辑
Text(
  list[newIndex]['_description'].length > 14 
      ? list[newIndex]['_description'].substring(0, list[newIndex]['_description'].length - 14)
      : list[newIndex]['_description'],
  overflow: TextOverflow.ellipsis,
  maxLines: 5,
  style: _textTheme.subtitle1,
)

3. 动画时长设置异常 #

reverseDuration: Duration.zero会让反向动画瞬间完成，发布模式下动画布局计算逻辑与调试模式不同，容易出现布局冲突。建议设置合理的反向时长：

reverseDuration: const Duration(milliseconds: 200),

4. Flexible的布局适配问题 #

AnimatedCrossFade对child的尺寸计算要求严格，Flexible可能导致发布模式下布局约束异常。如果父布局（Column）已经有足够空间，可以直接去掉Flexible，用Text的maxLines控制行数即可。

额外检查项 #

• 确认发布模式下_textTheme.subtitle1的文本颜色与容器背景色（Theme.of(context).primaryColor）对比度足够，避免文本因颜色相近被“隐藏”。
• 验证发布模式下list[newIndex]['_description']确实有有效值，可能调试与发布环境的数据源不同。
• 用flutter run --release --verbose启动应用，查看控制台是否有未捕获的异常日志。

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