Card with image on top and text below - flutter

Question

Currently I have a card where the image fills the card because I have fit: BoxFit.fill. However I need text below my image. I've tried a few different ways to introduce the text,,Columns etc.. But to no available. The images are of different sizes loaded from the Internet so the fit property works well with the images.
Here is what I have so far. my build method:
#override
Widget build(BuildContext context) {
return Column(children: [
GestureDetector(
onTap: () {
},
child: Container(
width: 335,
height: 174,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
),
),
]);
}
But I want to have text under the image like this design:
The process bar and timer are unnecessary.

Answer 1

You must place the image and text in a Column widget, in addition to specifying the image dimensions like this:
Column(children: [
GestureDetector(
onTap: () {},
child: Container(
width: 335,
height: 174,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: [
SizedBox(
width: 335,
height: 110,
child: Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
),
SizedBox(height: 16,),
Column(children:[
Text('Title'),
Text('Subtitle')
])
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
),
),
]);

Answer 2

This worked for me unless you want the text to be overlay, then u gotta use a Stack() then wrap your text in a Positioned() widget:
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: [
Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
Text('Something'),
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
)

Answer 3

Accepted solution giving render overflow error, Above issue, can be solved using the Stack widget. I recommend using MediaQuery instead of hardcoded values.
SizedBox(
width: 335,
height: 174,
child: Stack(
children: <Widget>[
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: [
SizedBox(
width: 335,
height: 110,
child: Image.network(
'https://via.placeholder.com/300?text=DITTO',
fit: BoxFit.fill,
),
),
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
Positioned(
bottom: 0,
left: 10,
child: SizedBox(
height: 50,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Title'),
Text('Subtitle')
],
),
),
)
],
),
),
Output: