Flutter ColoredBox Examples

The ColoredBox widget in Flutter is used to paint a background color on a rectangle area and draw its child over that area. The size of a ColoredBox is as small as possible to fit its child. To get a better understanding of this widget, let’s examine the examples below.

Example 1: Set the background color for a SizedBox

Preview:

The code:

Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: const ColoredBox(
          color: Colors.orange,
          child: SizedBox(
            width: 300,
            height: 200,
          ),
));

Example 2: Fill in a PNG image

This example will display a PNG image twice. In the first, we do not use the ColoredBox, and in the second we do.

Screenshot:

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          // The original image
          Image.network(
              'https://www.kindacode.com/wp-content/uploads/2020/12/dog-png.png'),

          // The "painted" image
          ColoredBox(
              color: Colors.yellow,
              child: Image.network(
                  'https://www.kindacode.com/wp-content/uploads/2020/12/dog-png.png')),
        ],
      ),
);

Example 3: ColoredBox with a circle shape child

Preview:

The code:

Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: const Center(
          child: ColoredBox(
            color: Colors.orange,
            child: CircleAvatar(
              radius: 150,
              backgroundColor: Colors.pink,
            ),
          ),
));

Wrapping Up

We’ve walked through a few examples of using the ColoredBox widget to make colorful things. If you’d like to learn more about Flutter and mobile development, take a look at the following articles:

• How to make an image carousel in Flutter
• How to render HTML content in Flutter
• Flutter PaginatedDataTable Example
• Flutter & Hive Database: CRUD Example
• Flutter ColorFiltered Examples
• Flutter: Drawing Polygons using ClipPath (4 Examples)

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.