Flutter: Do not expand row

Question

This is my source code:

Scaffold(
  body: Center(
    child: Container(
      color: Colors.green,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Flexible(
              fit: FlexFit.loose, child: Image.asset('images/demo.png')),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: Container(
                  color: Colors.yellow,
                  child: Text('Cancel'),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.red,
                  child: Text('Okay'),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);

This is the result:

I want it to be like this:

without using fixed sizes because the image dimensions may vary.

I already tried to use flexible on the row children. The problem with that solution is that the green container is being expanded like this:

which I don't want to happen.

Answer 1

EDIT, Did a little more searching and found what you seem to be looking for:

The IntrinsicWidth widget makes sure children have uniform width, which will be the width of the widest element (without the overlapping issue like in the Stack widget based solution). So this code accomplishes what you're trying to do:

Scaffold(
      body: Center(
        child: IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Flexible(
                flex: 1,
                fit: FlexFit.tight,
                child: Image.asset('images/demo.png'),
              ),
              Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.yellow,
                      child: Text('Cancel'),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Text('Okay'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

Screenshot:

---

OLD ANSWER:

If you don't mind overlapping a little bit of the bottom of the image with the buttons, the stack class sizes itself to its non positioned children, so this would work for you:

Scaffold(
      body: Center(
        child: Stack(
          fit: StackFit.loose,
          children: [
            Image.asset('images/demo.png'),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.yellow,
                      child: Text('Cancel'),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red,
                      child: Text('Okay'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

Screenshot: