Flutter：SafeArea内Container颜色无法修改，如何解决？

问题描述 #

页面顶层使用SafeArea组件，内部用Container包裹所有内容作为SafeArea的子组件，但修改Container的color属性时，页面始终显示白色，无法看到设置的颜色。相关代码如下：

class _MeetingScreenState extends State<MeetingScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      left: false,
      right: false,
      child: Container(
// Container color to change
        color: Colors.black87,
        child: Material(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ActionIconButton(
                          iconState: false,
                          iconStateOn: Icons.cameraswitch_outlined,
                          iconStateOff: Icons.cameraswitch_outlined),
                      Column(
                        children: const [
                          Text('Meeting title'),
                          // TODO implement meeting time
                          Text('04:28')
                        ],
                      ),
                      ActionIconButton(
                          iconState: _switchCamera,
                          iconStateOn: Icons.volume_up_outlined,
                          iconStateOff: Icons.volume_off_outlined,
                      iconBackgroundColor: AppColors.white,
                      activeIconColor: AppColors.white,
                      inactiveColor: AppColors.whiteWithOpacity,)
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

原因分析 #

问题出在Material组件上：Material默认的backgroundColor为白色，且会填充父容器（你的Container）的全部可用空间，导致Container的颜色被完全遮挡，所以看不到设置的Colors.black87。

解决方案 #

有两种简单的修复方式：

方案1：将Material的背景设为透明 #

让Material背景透明，底层Container的颜色就能透出来：

class _MeetingScreenState extends State<MeetingScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      left: false,
      right: false,
      child: Container(
        color: Colors.black87,
        child: Material(
          // 设置Material背景为透明
          backgroundColor: Colors.transparent,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ActionIconButton(
                          iconState: false,
                          iconStateOn: Icons.cameraswitch_outlined,
                          iconStateOff: Icons.cameraswitch_outlined),
                      Column(
                        children: const [
                          Text('Meeting title'),
                          Text('04:28')
                        ],
                      ),
                      ActionIconButton(
                          iconState: _switchCamera,
                          iconStateOn: Icons.volume_up_outlined,
                          iconStateOff: Icons.volume_off_outlined,
                          iconBackgroundColor: AppColors.white,
                          activeIconColor: AppColors.white,
                          inactiveColor: AppColors.whiteWithOpacity,)
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

方案2：直接给Material设置背景色 #

如果Container除了设置颜色外没有其他作用，可以直接将颜色设置在Material上，去掉多余的Container：

class _MeetingScreenState extends State<MeetingScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      left: false,
      right: false,
      child: Material(
        // 直接在这里设置背景色
        backgroundColor: Colors.black87,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ActionIconButton(
                        iconState: false,
                        iconStateOn: Icons.cameraswitch_outlined,
                        iconStateOff: Icons.cameraswitch_outlined),
                    Column(
                      children: const [
                        Text('Meeting title'),
                        Text('04:28')
                      ],
                    ),
                    ActionIconButton(
                        iconState: _switchCamera,
                        iconStateOn: Icons.volume_up_outlined,
                        iconStateOff: Icons.volume_off_outlined,
                        iconBackgroundColor: AppColors.white,
                        activeIconColor: AppColors.white,
                        inactiveColor: AppColors.whiteWithOpacity,)
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

两种方案都能解决颜色不显示的问题，可根据布局需求选择其中一种。

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