Flutter: Expanded overriding ConstrainedBox

Question

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.

Answer 1

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