Flutter: Expanded overriding ConstrainedBox

user_11979688 0
Viewed 1806

I need a Column to expand to a constrained width. So it expands until the maxWidth but doesn't mind being smaller if there isn't enough space. But the Expanded ignores the ConstrainedBox.

    Row(
      children: [
        const Spacer(),
        Expanded(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 50),
            child: Column(
              children: [
                Expanded(child: Container(color: Colors.red)),
                Expanded(child: Container(color: Colors.green)),
              ],
            ),
          ),
        ),
      ],
    )

Here's my full code for context:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GetBuilder<TimerController>(
          builder: (_) => CustomBackground(
            color: _timerController.currentChild?.color ?? Colors.blue,
            child: SafeArea(
              child: Center(
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: AppSizes.pagePadding),
                  child: OrientationBuilder(
                    builder: (context, orientation) =>
                        (orientation == Orientation.portrait)
                            ? ConstrainedBox(
                                constraints: BoxConstraints(
                                  maxWidth: AppSizes.maxWidth,
                                  minWidth: AppSizes.minWidth,
                                ),
                                child: Column(
                                  children: [
                                    SizedBox(height: AppSizes.pagePadding),
                                    Expanded(child: TimerClock()),
                                    Expanded(
                                      child: Column(
                                        children: [
                                          NameText(),
                                          ControlButtons(),
                                          SizedBox(height: 25),
                                          Expanded(child: QueueList()),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            : Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Expanded(
                                    child: ConstrainedBox(
                                      constraints: BoxConstraints(
                                        maxWidth: AppSizes.maxWidth,
                                        minWidth: AppSizes.minWidth,
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            vertical: AppSizes.pagePadding),
                                        child: TimerClock(),
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: AppSizes.pagePadding),
                                  Expanded(
                                    child: ConstrainedBox(
                                      constraints: BoxConstraints(
                                        maxWidth: AppSizes.maxWidth,  // this get's ignored
                                        minWidth: AppSizes.minWidth,
                                      ),
                                      child: Column(
                                        children: [
                                          Expanded(child: NameText()),
                                          ControlButtons(),
                                          SizedBox(height: 25),
                                          Expanded(child: QueueList()),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

And if I remove the Expanded, the Column has a fixed width (maxWidth) and throws an error if there isn't enough space.

dart flutter
2 Answers

Change the outer most Expanded to a Flexible. Then the child ConstrainedBox will be respected.

In my case I also added a width:double.infinity to the child of the Flexible to force the widget to always be as big as the maxWidth, and only reduce its size when there is no space.

My example:

Flexible(
  child: Container(
    constraints: BoxConstraints(maxWidth: screenWidth * 0.25),
    width: double.infinity,
  ),
);
user_110547460

You are using Expanded in a Column widget which means that it will try to expand to fill the space vertically (based on the height of the parent not its width). As mentioned in the documentation of Expanded:

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column).

source

And as you did not precise a maxHeight in your constraints it will be considered as double.infinity.

user_99423460
Related