In Flutter, How do you add a background color to a container while also adding borders

Question

When you try to add a background color, you get an error message that says you can't have a color and a box decoration. Anyone know how to fix this?

Answer 1

Because you don't need to add color separately as decoration has the same property to achieve the same. Also it has the Border inside the same decoration prop using the BoxDecoration class.

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

Answer 2

The error message arises because you cannot directly specify both a color property and a decoration property with a color field in the same widget in Flutter. This is because both properties attempt to fill the background of the widget, leading to ambiguity and potential inconsistencies.

Here's how to fix the issue:

1. Use decoration with color:

   If you want to use a solid color background, utilize the BoxDecoration widget within the decoration property:

Container(
  decoration: BoxDecoration(
    color: Colors.blue,  // Set the desired background color
  ),

)

Answer 3

Put your color property from Container inside BoxDecoration object

Answer 4

You can can not use color outside of decoration property if you are using it inside your container. The error says:

Cannot provide both a color and a decoration To provide both, use "decoration: BoxDecoration(color: color)". 'package:flutter/src/widgets/container.dart': Failed assertion: line 269 pos 15: 'color == null || decoration == null'

If you use decoration property then don't define color outside of decoration otherwise you will get an error.

To use border color, you can write like this:

decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.red,
              width: 5,
            ),
          ),

Here is the output:

Here is link for more detail of container: https://api.flutter.dev/flutter/widgets/Container-class.html