Widget taking width of grandparent-CodePudding

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.

CodePudding user response：

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(),
    ),
  ),
);

CodePudding user response：

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())));

CodePudding user response：

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

CodePudding user response：

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()),
        ));