Flutter : How to color Sizedbox (without using container)-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

You can try ColoredBox widget

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

CodePudding user response：

You can wrap your SizedBox with ColoredBox

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

CodePudding user response：

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 Flutter widget inspector is,, rows, and columns).