Flutter Expand Column's children horizontally to the size of the largest children

Question

I have a column inside a Positioned (within a Stack), meaning that I cannot use any Expanded widget as, as far as I know the positioned does not provide any constraints meaning. In particular, I am trying to align 2 widgets in a column to the left and to the right. But if I put a row inside a column, it gets shrunken to the size of the smallest children inside it, like the image, while it should expand to the size of the largest children.

This is the code for the above picture:

@override
  Widget build(BuildContext context) {
    return Positioned(
      top: 20,
      left: 20,
      child: Container(
        color: Colors.blue,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Long Widget Title"),
              const SizedBox(height: 20),
              Container(
                color: Colors.red,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [const Text("Left Text")],
                ),
              ),
              const SizedBox(height: 20),
              Container(
                color: Colors.green,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  mainAxisSize: MainAxisSize.max,
                  children: [const Text("Right Text")],
                ),
              )
            ],
          ),
        ),
      ),
    );

This is the layout I am trying to obtain, with its behaviour in different situations:

I think it might be obtainable with the current setup if there was a way to stretch each row (including the title) to the size of the widest child. Is that possible?

Answer 1

You can easily achive that layout using IntrinsicWidth https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html

A widget that sizes its child to the child's maximum intrinsic width.

Just put the widget before your Container like below :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 20,
      left: 20,
      child: IntrinsicWidth(
        child: Container(
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("Long Widget Title"),
                const SizedBox(height: 20),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.red,
                        child: const Text("Left Text"),
                      ),
                    ),
                    const Expanded(child: SizedBox.shrink()),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    const Expanded(child: SizedBox.shrink()),
                    Expanded(
                      child: Container(
                        color: Colors.green,
                        child: const Text("Right Text"),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Check the dartpad version here https://dartpad.dev/?id=2b07ca68f1897d9868400858b9ca169b