Flutter – ColoredBox Class Widget

A Colored Box is a container that fills it with color according to its child or A widget that paints its area with a specified Color and then draws its child on top of that color. A sample image is given below to get an idea about what we are going to do in this article.

How to use it?

You can simple use this widget anywhere in your project as you needed that.

Dart

ColoredBox(
            color: Colors.green,
            child: Text('Colored Box'),
          ),

Step By Step Implementation

Step 1: Create a New Project in Android Studio or in vs code.

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

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

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut: For creating a stateless or Stateful widget, you can create a stateless or stateful widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

@override
Widget build(BuildContext context) {
    return MaterialApp();
}
}

Step 4: Working with Scaffold Widget

Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
appBar: AppBar(
    title: Text('ColorBox'),
),
body: 
),

Step 5: Now we can simply use the ColorBox widget and assign its parameters color and child. color parameter is required parameter other wise it will raise an error.

body: Center(
          child: ColoredBox(
            color: Colors.green,
            child: Text('Colored Box'),
          ),
        ),

Final Code

Dart

import 'package:flutter/material.dart';

void main() {
  // runApp method that
  // accept an App
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp with
    // debug banner false
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      // scaffold with appbar and body
      home: Scaffold(
        appBar: AppBar(
          title: Text('Colored Box Class'),
        ),
        body: Center(
          // colorbox requires color
          // and child property
          child: ColoredBox(
            color: Colors.green,
            child: Text('Colored Box'),
          ),
        ),
      ),
    );
  }
}

Output:

If you notice that the color box is filled by the color green but only the part of its child is captured. That means it takes the height and width of the child widget.