CODEWITHSUNDEEP
flutterdartflutter-layoutbackground-colorflutter-container
Mary
Mary

Reputation: 20495

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

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

Upvotes: 76

Views: 195782

Answers (5)

AADARSH MANE
AADARSH MANE

Reputation: 86

So basically in Flutter it is not allowed you cannot give color to both container and boxdecortion at the same time in the below provided i have commented out one of the color which in my case is container which will help u solve your error.

Container(
          height: 150,
          // color: Colors.red,  
          decoration: BoxDecoration(
            color: Colors.black, //assign either here or to the container
              borderRadius: BorderRadius.circular(24),))

Upvotes: 0

adarsh
adarsh

Reputation: 531

only set background color use this code

new Container(
  color: Colors.pink,
  
);

if set background color with radius or shape then use color inside decoration

 Container(
          decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(17)),
child:SizeBox());

Upvotes: 6

CopsOnRoad
CopsOnRoad

Reputation: 268314

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)
)

Upvotes: 31

Phan Hero
Phan Hero

Reputation: 325

Flutter team says that color property in BoxDecoration() is quite frequently used in applying background color to Container widget. As such they have put a separate shorthand for color property in Container widget. So, when we use both color property and BoxDecoration() color property in same Container widget, an assertion will be thrown as follows:

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

Upvotes: 1

Mary
Mary

Reputation: 20495

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

Upvotes: 75

Related Questions