How to Set the Background Color of a Container Widget in Flutter?

A Container widget is a most commonly used widget in Flutter for creating box-like structures. It provides a convenient way to group similar widgets together and apply some common styles to these widgets such as margin, padding, background etc.

The simplest way to set the background color of a container widget in Flutter is to use its color property and set it to any background color you want.

The color value can be specified in various ways such as a named color, HEX value, RGBA value, etc. Named colors are predefined colors in Flutter that are part of the Colors class. You can access them using the Colors class eg. Colors.blue, Colors.green, Colors.red, etc.

The following example code shows how you can set the background color of a Container widget using its color property:

Container(
  width: 200,
  height: 200,
  color: Colors.lightGreen, // <-- Set bg color to lightgreen
  // Add more properties
)

See the full code below.

This example sets the background color of the Container to pink using the Colors.pink enum:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // App and app bar title
  static const String _title = 'Set Container Color';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Container(
          width: 200,
          height: 200,
          color: Colors.pink, // <-- Set bg color to pink
          alignment: Alignment.center,
          margin: const EdgeInsets.all(20),
          child: const Text('Hello, World!!'),
        ),
      ),
    );
  }
}

output:

Method 2: Use the decoration Property to set the Background Color

You can also use the decoration property of the Container widget to set its background color.

The decoration property takes an instance of type BoxDecoration. The BoxDecoration class provides a number of properties to change the visuals of the container such as color, border, gradient, shape, etc.

Here is a quick code sample that shows how you can set the background color of a Container using the decoration property:

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    color: Colors.lightGreen, // <-- bg color
  ), 
)

See the full Flutter code in the below example.

This example sets the background color of the Container widget to light green. It also sets the border radius of all corners of the Container to 10 pixels using the decoration property:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // App and app bar title
  static const String _title = 'Set Container Color';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          margin: const EdgeInsets.all(20),
          decoration: const BoxDecoration(
            color: Colors.lightGreen, // <--- bg color
            borderRadius: BorderRadius.all(
              Radius.circular(10), // <--- border radius
            ),
          ),
          child: const Text('Hello, World!!'),
        ),
      ),
    );
  }
}

Output:

Conclusion

In this article, we learned how we can set the background color of a Container in Flutter.

In summary, there are two ways to set the background color of a Container in Flutter. The first way is to use the color property of the Container and set it to any color you want.

The second approach is to use the decoration property of the Container widget. The decoration property also gives you the flexibility to change other styles of the container.

If you want to use the predefined colors, you can use the Colors class and access the colors using the Colors.colorName syntax eg. Colors.blue, Colors.red, etc.

Thanks for reading.