Question 77096 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter, cannot change container color

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,)
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    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,
  // ...
),
    Login or Signup to reply.
  2. 0

    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,
  // ...
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search