Container color in flutter

Question

I want a colour for container but getting error while using colour.

My code:

Container(
    color:Colors.red,
    width: 50,
    height: 50,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50)
    )
),

Does this answer your question? [Flutter BoxDecoration’s background color overrides the Container's background color, why?](https://stackoverflow.com/questions/45724567/flutter-boxdecoration-s-background-color-overrides-the-containers-background-co) — Sagar Acharya, Nov 16 '22 at 10:29

score 3 · Answer 1 · answered Nov 16 '22 at 10:29

3

You cannot add color to the container if you add decorations. The solution is to enter color into the decoration box as follows

Container( 
  width: 50, 
  height: 50, 
  decoration: BoxDecoration(color: Color.red)
)

answered Nov 16 '22 at 10:29

ariga

76
3

score 2 · Answer 2 · answered Nov 16 '22 at 10:26

You can't use "color" and "decoration" at the same time. You need to pass the "color" parameter to the "BoxDecoration" widget like this:

Container(
    width: 50,
    height: 50,
    decoration: BoxDecoration(
         color:Colors.red,
         borderRadius: BorderRadius.circular(50)
    )
),

Vignesh KM · Answer 3 · 2022-11-16T12:34:11.143

Use color inside container directly to set the background for the children. If you use any decoration then it will conflict with outside color. In those case you need to give color inside decoration.

FullCode : here

Column(
  children: [
    Container(
      padding: EdgeInsets.all(10),
      color: Colors.green,
      child: Text('test'),
    ),
    SizedBox(height: 10),
    Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text('test'),
    )
  ],
)

Output for the above code is

score 0 · Answer 4 · answered Nov 16 '22 at 10:28

0

Please use color in BoxDecoration like this

Container( width: 50, height: 50, decoration: BoxDecoration( borderRadius: BorderRadius.circular(50),color:Colors.red,)),

answered Nov 16 '22 at 10:28

Umesh Rajput

218
1
11

score 0 · Answer 5 · answered Nov 16 '22 at 11:14

0

You can't give both colors and decoration to Container(). If you are looking to give color and decoration to Container, give color inside Boxdecoration

Container( width: 50, height: 50, decoration: BoxDecoration(color: Color.red) )

answered Nov 16 '22 at 11:14

frank jebaraj

5
6

score 0 · Answer 6 · answered Nov 16 '22 at 15:18

The container does not accept the color parameter when there is a decoration parameter. This happens because the BoxDecoration has a color parameter. Just put the color inside the BoxDecoration and remove the color parameter from the Container and your problem will be solved.

Container(
    width: 50,
    height: 50,
    decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(50),
         color: Colors.red
    )
),

Container color in flutter

6 Answers6