Flutter中SizedBox与Image.asset报错求助：代码红色下划线问题

问题原因 #

你的Column组件的children列表被const修饰，但列表内的SizedBox(height: size.height / 9)引用了非编译时常量size——size是在build方法中通过MediaQuery获取的运行时变量，无法作为const列表的元素。const列表要求所有子元素必须是编译期就能确定的常量，这就是红色下划线的根源。

修复方案 #

有两种可行的解决方式：

方式1：移除children前的const修饰符

直接去掉children: const [中的const，让列表支持运行时变量：

import 'package:flutter/material.dart';

class LandingScreen extends StatelessWidget {
  const LandingScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [ // 移除const修饰符
            const SizedBox(height: 50),
            const Text(
              'Welcome to app',
              style: TextStyle(
                fontSize: 33,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(height: size.height / 9),
            const Image.asset(
              'assets/bg.png',
              height: 340,
              width: 340,
            ),
          ],
        ),
      ),
    );
  }
}

方式2：保留const并替换为常量值（可选）

如果希望继续使用const列表优化性能，可以将size.height /9替换为固定数值，但这种方式无法适配不同屏幕尺寸，仅适合固定布局场景：

children: const [
  SizedBox(height: 50),
  Text(
    'Welcome to app',
    style: TextStyle(
      fontSize: 33,
      fontWeight: FontWeight.w600,
    ),
  ),
  SizedBox(height: 60), // 替换为固定常量
  Image.asset(
    'assets/bg.png',
    height: 340,
    width: 340,
  ),
],

额外优化建议 #

推荐使用方式1，同时给列表中能作为常量的子元素单独添加const（比如示例中的SizedBox(height:50)、Text、Image.asset），这样既能解决变量引用问题，又能保留const带来的性能优化。

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