Flutter Release版本组件异常求助：首次启动卡片布局错乱

问题现象 #

Debug模式下组件显示完全符合预期，但使用flutter build apk编译的Release版本首次启动时，卡片组件布局错乱；切换至其他Tab再返回当前Tab后，布局恢复正常。

相关代码 #

import 'package:course_app/constants.dart';
import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';

class CategoryCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height * 0.18,
      width: size.width * 0.3,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(4),
          boxShadow: [
            BoxShadow(
                offset: const Offset(1, 1),
                blurRadius: 5,
                color: Colors.grey.withOpacity(0.3)),
          ]),
      child: Column(children: [
        SizedBox(
          height: size.height * 16 / 780,
        ),
        CircularPercentIndicator(
          radius: size.height * 30/780,
          lineWidth: 5.0,
          percent: 0.5,
          center: Text("100%", style: TextStyle(fontSize: size.height * 14/780),),
          animation: true,
          progressColor: kPrimaryColor,
        ),
        SizedBox(
          height: size.height * 14 / 780,
        ),
        Text(
          "Makanan",
          style: TextStyle(fontSize: size.height * 16 / 780),
        ),
        SizedBox(
          height: size.height * 4 / 780,
        ),
        Text(
          "Rp. 30.000",
          style: TextStyle(fontSize: size.height * 14 / 780, color: Colors.black.withOpacity(0.6)),
        ),
      ]),
    );
  }
}

版本对比截图 #

Release版本（布局错乱） #

Debug版本（正常显示） #

修复方案 #

1. 移除硬编码的固定屏幕高度依赖 #

代码中多处使用size.height * X /780计算间距和字体大小，这种方式绑定了特定屏幕高度，在Release模式下布局计算优先级更高，容易出现尺寸偏差。建议改用屏幕百分比或LayoutBuilder获取父容器约束：

示例修改：

// 将原有的固定分母计算改为百分比
SizedBox(height: size.height * 0.02), // 替代size.height *16/780

或者使用LayoutBuilder获取父组件实际尺寸，避免依赖全局MediaQuery：

class CategoryCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        double parentHeight = constraints.maxHeight;
        double parentWidth = constraints.maxWidth;
        return Container(
          height: parentHeight,
          width: parentWidth,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(4),
            boxShadow: [
              BoxShadow(
                offset: const Offset(1, 1),
                blurRadius: 5,
                color: Colors.grey.withOpacity(0.3),
              ),
            ],
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(height: parentHeight * 0.08),
              CircularPercentIndicator(
                radius: parentHeight * 0.17,
                lineWidth: 5.0,
                percent: 0.5,
                center: Text("100%", style: TextStyle(fontSize: parentHeight * 0.08)),
                animation: true,
                progressColor: kPrimaryColor,
              ),
              SizedBox(height: parentHeight * 0.07),
              Text(
                "Makanan",
                style: TextStyle(fontSize: parentHeight * 0.09),
              ),
              SizedBox(height: parentHeight * 0.02),
              Text(
                "Rp. 30.000",
                style: TextStyle(fontSize: parentHeight * 0.08, color: Colors.black.withOpacity(0.6)),
              ),
            ],
          ),
        );
      },
    );
  }
}

2. 调整CircularPercentIndicator的动画触发时机 #

Release模式下动画初始化可能在布局未稳定时完成，导致首次渲染错乱。可以改为延迟触发动画，需要将组件改为StatefulWidget：

class CategoryCard extends StatefulWidget {
  @override
  State<CategoryCard> createState() => _CategoryCardState();
}

class _CategoryCardState extends State<CategoryCard> {
  bool _shouldAnimate = false;

  @override
  void initState() {
    super.initState();
    // 延迟一帧后触发动画，确保布局已稳定
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _shouldAnimate = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      // ... 原有容器代码
      child: Column(children: [
        // ... 其他子组件
        CircularPercentIndicator(
          animation: _shouldAnimate, // 使用延迟后的动画开关
          // ... 其他属性
        ),
        // ... 其他子组件
      ]),
    );
  }
}

3. 给Column添加明确的对齐方式 #

默认Column的mainAxisAlignment是MainAxisAlignment.start，在Release模式下可能因为布局计算差异导致元素偏移，添加明确的对齐方式可以约束布局：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // ... 子组件
  ],
)

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