Flutter Web环境下Container组件无法显示颜色问题求助

调试过程中无任何报错，但仅在Flutter Web环境里，Container组件无法正常显示颜色。相关代码如下：

import 'package:flutter/material.dart';
import 'package:jumil_connect_front/utilities/constants/app_constants.dart';
import '../../widgets/dashboard/header.dart';
import '../../widgets/dashboard/top_menu.dart';

class FilesScreen extends StatefulWidget {
  static const String route = '/files';
  const FilesScreen({super.key});

  @override
  State<FilesScreen> createState() => _FilesScreenState();
}

class _FilesScreenState extends State<FilesScreen> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
        // const Header(),
        // const SizedBox(
        //   height: 5,
        //   width: double.infinity,
        //   child: Image(
        //     image: AssetImage('assets/images/color_line.png'),
        //     fit: BoxFit.fill,
        //   ),
        // ),
        // const TopMenu(),
        Row(
          children: [
            Container(
              width: 330,
              height: size.height,
              color: Colors.red
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

可能的原因及解决办法 #

• Row的空间约束缺失：Row默认会根据子组件尺寸收缩，若未给Row设置横向约束，Container可能无法获取足够空间展示颜色。可以给Row添加mainAxisSize: MainAxisSize.max让它占满父级宽度：

  Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Container(
        width: 330,
        height: size.height,
        color: Colors.red,
      ),
    ],
  )
  

  或者用Expanded包裹Container，强制它填充Row的可用空间。

• Column布局限制：Column默认横向不会拉伸子组件，导致Row无法占满宽度。给Column添加crossAxisAlignment: CrossAxisAlignment.stretch，让子组件横向铺满父容器：

  Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      // 你的Row代码
    ],
  )
  

• Web渲染引擎的兼容性问题：部分Flutter版本在Web端对color属性的渲染存在偶发异常，可改用BoxDecoration替代直接设置color：

  Container(
    width: 330,
    height: size.height,
    decoration: BoxDecoration(color: Colors.red),
  )
  

• 浏览器环境干扰：极少数情况浏览器的自定义CSS会影响Flutter Web渲染，可尝试在不同浏览器测试，或检查项目index.html中是否有冲突的样式代码。

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