Flutter Container: cannot provide both a color and a decoration

Suragch picture Suragch · Dec 8, 2018 · Viewed 7.4k times · Source

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

Suragch picture Suragch · Dec 8, 2018

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"),
  );
}

enter image description here

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.