How to make an image fill out its parent container? - flutter

Question

I want my image to fill exactly half of my screen, and in the bottom row i want to add some more widgets. I tried to make the rows spaceAround so that equal space is given. On adding image widget to row, small image was displayed. I added a SizedBox.expand parent to the image and gave the image BoxFit.fill fit, and then the entire image disappeared all together. How do I fix this problem?
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
#override
Widget build(BuildContext context){
final view = Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
children: <Widget>[
SizedBox.expand(
child: Image.asset('assets/airb.jpeg'),
)
],
),
Row(
children: <Widget>[
],
)
],
);
return Scaffold(
appBar: AppBar(
title: Text('Image')
),
body: view,
);
}
}

Answer 1

If I got it right, from your description, you would like to have an image on the top half of your screen and then some other widgets below it.
Usually when I do things relative to the size of a container (or relative to the screen size), I'm using LayoutBuilder which will tell you the size constraints that it has (like maxHeight, maxWidth). One thing tho, be careful with it because sometimes these constraints can be =infinity (if you wrap the LayoutBuilder inside a ```Row/Column``
Now for your case you can use the following code snippet:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: LayoutBuilder(builder: (context, constraints) {
return Column(
children: <Widget>[
Container(height: constraints.maxHeight / 2, color: Colors.red), // replace this with an image
//Add extra widgets here.
Text("this will be below image")
],
);
}));
}
Note, the code is a simple example on how to do the sizing, you will have to add the widgets that you need and customise them :).

Answer 2

This may help you-
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
final view = Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 5,
child: Row(
children: <Widget>[
new Image.asset(
"images/pitch.png",
fit: BoxFit.cover,
),
],
)),
Expanded(
flex: 5,
child: Row(
children: <Widget>[],
)),
],
);
return Scaffold(
appBar: AppBar(title: Text('Image')),
body: view,
);
}
}