How to control image size in container? - flutter

Question

Inside a Card there is one column,which contain 2 Flexible widgets (with flex property 3,1) each one contain a Container widget
here is the code:
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.red,
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(child: Text('Request')
),
)
)
],
),
),
);
this code give me the below screen:
Now i want to place image to cover all the red area,
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.red,
child: Image.network(
'https://placeimg.com/640/480/any', fit: BoxFit.cover,)
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(child: Text('Request')
),
)
)
],
),
),
);
}
but when add image inside Container this is what happen
i tried to change fit: BoxFit.cover, but nothing happen
how to make image cover Container(with red area) without change the container size?
Adding Row and other column
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20,
color: Colors.black
)
),
)
),
)
)
],
),
),
Card(
child: Column(
children: [
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20,
color: Colors.black
)
),
)
),
)
)
],
),
),
],
),
);
}

Answer 1

Use the decoration property of the Container to give it an Image instead:
Flexible(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
RESULT:
EDIT: "Why is my Image not showing when I use it in a Row" ?:
You need to give your Card widget a Width by wrapping in a SizedBox or a Container.
Added a demo using your code as an example:
class Help extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 150, // give width here
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20, color: Colors.black)),
)),
))
],
),
),
),
SizedBox(
width: 150, // give width here
child: Card(
child: Column(
children: [
Expanded(
flex: 3,
child: Container(
// use the decoration property
decoration: BoxDecoration(
color: Colors.red,
// image here
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any',
),
fit: BoxFit.cover,
),
),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.amber,
child: Center(
child: RichText(
text: TextSpan(
text: 'Request a service',
style: TextStyle(
fontSize: 20, color: Colors.black)),
)),
))
],
),
),
),
],
),
),
);
}
}
NOTE: It would be advisable to give the Card a width based on the Device screen.
RESULT: