Flutter Container: cannot provide both a color and a decoration

Question

I want to draw a border around my container and have the background be colored.

Widget bodyWidget() {
  return Container(
    color: Colors.yellow,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
    ),
    child: Text("Flutter"),
  );
}

But when I try this I get the error

Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

How is this solved?

Answer 1

Remove the color parameter from the Container and add it to the BoxDecoration:

Widget bodyWidget() {   return Container(     decoration: BoxDecoration(       color: Colors.yellow,       border: Border.all(color: Colors.black),     ),     child: Text("Flutter"),   ); } 

If you check the Container source code you can see that the color parameter is just used to set the BoxDecoration color if the decoration is null.

decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null), 

The error you got is just a helpful reminder of that. Otherwise you would get a strange override (as was apparently the case in the past) or you might not even notice the bug.

Answer 2

The color property is a shorthand for creating a BoxDecoration with a color field. If you are adding a box decoration, simply place the color on the BoxDecoration.

assert(color == null || decoration == null,   'Cannot provide both a color and a decoration\n'   'To provide both, use "decoration: BoxDecoration(color: color)".' ), 

So if you have used the BoxDecoration in the Container, then you have to remove the color parameter from the Container and add to it in the BoxDecoration

          Container(               decoration: BoxDecoration(                 color: Colors.yellow,               ),            // color: Colors.yellow,           )