Flutter BoxDecoration’s background color overrides the Container's background color, why?

Question

I have a Flutter Container widget and I defined a color for it (pink), but for some reason, the color in BoxDecoration overrides it (green). Why?

new Container(
  color: Colors.pink,
  decoration: new BoxDecoration(
    borderRadius: new BorderRadius.circular(16.0),
    color: Colors.green,
  ),
);

Solution 1

Container’s color is shorthand for BoxDecoration’s color, so BoxDecoration's color in the Container's decoration property overrides its Container's color.

Solution 2

Problem:

You can't use color and decoration at the same time. From docs:

The color and decoration arguments cannot both be supplied, since it would potentially result in the decoration drawing over the background color. To supply a decoration with a color, use decoration: BoxDecoration(color: color).

---

Solutions:

• Use only color:

  Container(
    color: Colors.red
  )
  

• Use only decoration and provide color here:

  Container(
    decoration: BoxDecoration(color: Colors.red)
  )
  

Solution 3

The color and decoration arguments cannot both be supplied, since it would potentially result in the decoration drawing over the background color. To supply a decoration with color, you can use the below code.

decoration: BoxDecoration(color: Colors.red).

Comments

[Kamlesh]

i want to give blue color for border and amber for container background color, how can i do?

[Vinoth Vino]

You can achieve like this decoration: BoxDecoration( color: Colors.yellow, border: Border.all(color: Theme.of(context).accentColor,) ), @Kamlesh