Flutter, cannot change container color-CodePudding

I have a screen that has a SafeArea widget on top and then everything inside is wrap with container and pass as a body to safearea. But when I want to change the container color, it stays always white.

Did I implement this UI wrong? How can I change this 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,)
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Material also applies color and it is over the one of the Container.

You can remove the Container and give your color to the Material widget:

Change

Container(
  // Color to change
  color: Colors.black87,
  child: Material(
    // ...
  ),
),

with

Material(
  // Color to change
  color: Colors.black87,
  // ...
),

CodePudding user response：

The Material widget is responsible for:

Clipping: If clipBehavior is not Clip.none, Material clips its widget sub-tree to the shape specified by shape, type, and borderRadius. By default, clipBehavior is Clip.none for performance considerations. See Ink for an example of how this affects clipping Ink widgets. Elevation: Material elevates its widget sub-tree on the Z axis by elevation pixels, and draws the appropriate shadow. Ink effects: Material shows ink effects implemented by InkFeatures like InkSplash and InkHighlight below its children.

so need to add the colors in the material widget as per Valentin Vignal Answer . i hope you understand .

Material(
  // Color to change
  color: Colors.black87,
  // ...
),