Flutter: Do not expand row - image

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:

Answer 2

Maybe this will help.
You can use Spacer(); between the two text Cancel & Okay. Spacer() will put second text to end of row.
Row(
children[
Container(child: Text('Cancel', style...)),
Spacer(),
Container(Text('Okay', style...)),
]
);

Answer 3

maybe you can get the width of the image and pass it to the container that wraps the column:
import 'dart:io';
File image = new File('image.png'); // Or any other way to get a File instance.
var decodedImage = await decodeImageFromList(image.readAsBytesSync());
final width = decodedImage.width;