CODEWITHSUNDEEP
flutterflutter-layoutflutter-animationflutter-testflutter-design
Umesh Rajput
Umesh Rajput

Reputation: 214

Container color in flutter

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

Upvotes: 0

Views: 2805

Answers (6)

Gabi Mangili
Gabi Mangili

Reputation: 190

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

Upvotes: 1

Vignesh KM
Vignesh KM

Reputation: 2076

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

enter image description here

Upvotes: 1

frank jebaraj
frank jebaraj

Reputation: 5

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

Upvotes: 0

ariga
ariga

Reputation: 76

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

Upvotes: 3

Umesh Rajput
Umesh Rajput

Reputation: 214

Please use color in BoxDecoration like this

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

Upvotes: 0

VincentDR
VincentDR

Reputation: 709

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

Upvotes: 2

Related Questions