Widget taking width of grandparent - flutter

Question

The CircularProgressIndicator widget is taking width of its grandparent widget, the SizedBox of width 200. I'm expecting the dimension to be 10x10, but the dimensions are 200x10. I get the same behavior if the innermost widget is a box drawn with a Container and BoxDecoration.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Color.fromARGB(255, 18, 32, 47),
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const SizedBox(
width: 200,
child: SizedBox(
width: 10, height: 10, child: CircularProgressIndicator()));
}
}
This is a simplified version of my app, and I need the outer SizedBox.

Answer 1

There are some limitation on Widget constrains.
If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored. Be specific when defining alignment
A widget can decide its own size only within the constraints given to it by its parent. This means a widget usually can’t have any size it wants.
A widget can’t know and doesn’t decide its own position in the screen, since it’s the widget’s parent who decides the position of the widget.
readmore here: https://docs.flutter.dev/development/ui/layout/constraints
thats why, the second SizedBox size was ignored, because its doesnt
know the position and aligment. and because of that, the
CircularProgressIndicator() take the grandparent size.
Solution:
set the alignment to the SizedBox.
const SizedBox(
width: 200,
child: Align(alignment:Alignment.center,
child: SizedBox(
width: 10, height: 10, child: CircularProgressIndicator())));

Answer 2

The short answer and solution is just wrap your inner SizedBox with Center. It will help.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const SizedBox(
width: 200,
child: Center(
child: SizedBox(
width: 10,
height: 10,
child: CircularProgressIndicator(),
),
),
);
}
}
I recommend you read this article which describes how sizes and constraints work in Flutter. https://docs.flutter.dev/development/ui/layout/constraints

Answer 3

You can use Center widget to centralize the child widget
SizedBox(
width: 200,
child: Center(
child: SizedBox(
width: 10, height: 10, child: CircularProgressIndicator()),
));
Or you can use Align widget to re-position the child in the available area
SizedBox(
width: 200,
child: Align(
alignment: Alignment.topRight,
child: SizedBox(
width: 10, height: 10, child: CircularProgressIndicator()),
));

Answer 4

Remove the outer SizedBox which is having the width of 200.
or use like this.
const SizedBox(
width: 200,
child: Center(
child: SizedBox(
width: 10,
height: 10,
child: CircularProgressIndicator(),
),
),
);