How to make a image fit in 1/3rd of screen in flutter - flutter

Question

I want to create a layout like this where the users will select and image and it'll take them to another screen like below and the selected image will take about one-third portion of the screen. The rest 2/3rd will be used as a canvas as you can see.
Unfortunately this is what I've got till now:
Here's the entire code:
import 'package:flutter/material.dart';
import 'package:flutter_app/src/components/Canvas.dart';
import 'package:flutter_app/src/components/DrawingArea.dart';
class DetailsPage extends StatelessWidget {
List<DrawingArea> points = [];
final String imagePath;
final String title;
final int index;
DetailsPage(
{#required this.imagePath, #required this.title, #required this.index});
// Display the selected image
Widget displayImage(String imagePath) {
return Container(
child: Expanded(
child: Hero(
tag: 'logo$index',
child: Container(
margin: EdgeInsets.only(top: 20, right: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("This will be the canvas"),
),
body: Container(
child: Column(
children: <Widget>[
displayImage(imagePath),
],
),
),
);
}
}

Answer 1

You have to set height of container which you can set by using MediaQuery as shown below:
Past this function in your code
Widget displayImage(String imagePath) {
return Container(
height: MediaQuery.of(context).size.height / 3,
child: Expanded(
child: Hero(
tag: 'logo$index',
child: Container(
margin: EdgeInsets.only(top: 20, right: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
),
),
),
);
}

Answer 2

You can use Flexible: https://api.flutter.dev/flutter/widgets/Flexible-class.html
https://youtu.be/CI7x0mAZiY0
Column(children: [
Flexible(
flex: 1
child: Container(color: Colors.blue),
Flexible(
flex: 2
child: Container(color: Colors.green),
),
]);

Answer 3

Not sure if I got you right. Is this what you're trying to get?
Column(
children: [
Expanded(
flex: 1,
child: Image.asset(
'your_image_asset',
fit: BoxFit.cover,
),
),
Expanded(
flex: 2,
child: Placeholder(),
),
],
)