skip to Main Content

I’m trying to set a colour to a container and a different one to it’s decoration but the compiler says it’s impossible

Container(
  width: 110,
  height: 110,
  color: Colors.red,
  decoration: BoxDecoration(
    color: appColor,         // personalized colour
    border: Border.all(width: 8),
    borderRadius: BorderRadius.all(Radius.circular(90)),
  ),                    
),

2

Answers


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

    that because in container.dart there is assert:

    assert(color == null || decoration == null,
             'Cannot provide both a color and a decorationn'
             'To provide both, use "decoration: BoxDecoration(color: color)".',
           ),
    
    Login or Signup to reply.
  2. Since they serve two distinct functions, adding color and decoration to a widget at the same time is not feasible with Flutter.

    Color is a straightforward way to specify a widget’s background colour or text color. It is a fundamental characteristic that may be changed on the widget itself.

    In contrast, decoration is a more complicated attribute that enables you to provide a widget several aesthetic effects, such a border, a background picture, or a gradient. It is a more complex attribute than a mere colour and calls for additional setting.

    There could be issues when you provide a widget both colour and decoration. For instance, if you set a background color first with color and then an image with decoration, the picture will cover the color and make it invisible.

    So, You should pick either colour or decoration to define the visual look of your widget, depending on your needs, to avoid conflicts and guarantee that your widgets are presented as intended.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search