Flutter : How to color Sizedbox (without using container)

Question

1. Explanation

I want to change full color of 'SizedBox' to see the location and scope of 'SizedBox'. I wonder is there any way to change SizedBox's color without filling it with Container or Decoration box. If not, I want to know how to fill SizedBox with decoration box.

2. Code

Here is a code that I tried.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        appBar: AppBar(
          title : const Text('this is title'),
        ),
        body : const SizedBox(
          width : 200,
          child: DecoratedBox(
              decoration: BoxDecoration(
                color : Colors.red,
              ),
          ),
        ),
        bottomNavigationBar: (
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              Icon(Icons.favorite),
              Icon(Icons.home),
              Icon(Icons.settings)
            ],
          )
        ),
      ),
    );
  }
}

**3. Result **

Here is what I got from the code.

user_12755955 · Answer

You can try ColoredBox widget

SizedBox(
  width : 200,
  height: 20,
  child: ColoredBox(color: Colors.amber),
),

user_10157127 · Answer

You can wrap your SizedBox with ColoredBox

ColoredBox(
  color: Colors.cyanAccent,
  child: SizedBox(
      width: 200,
      height: 100,),
),

user_9367299 · Answer

If you'd like to decorate the SizedBox to see the location and scope of the Widget just for debugging purposes, we can enable the debugPaintSizeEnabled just by pressing p on the CLI upon launching the flutter run command.

Otherwise, using a Container with explicit size parameters it's mostly the same as using SizedBox, and it would allow you to use have a background color or border decoration.

Another option would be to use a ColoredBox as the child of the SizedBox, or vice versa.

user_14236110 · Answer

I'm not sure why you'd use it but you could have the child of the SizedBox be a container with the color you want. The container will stretch to the sizes provided

SizedBox(
        height: 10,
        width: 30,
        child: Container(color: Colors.red), 
     ),

Also you could use the widget inspector provided by flutter:

https://docs.flutter.dev/development/tools/devtools/inspector#:~:text=The%20Flutter%20widget%20inspector%20is,%2C%20rows%2C%20and%20columns).

Flutter : How to color Sizedbox (without using container)

4 Answers