Place widgets correctly inside a Card - flutter

Question

I'm trying to create a ListView with Card widget.
I have the ListView and the Card but I can't figure out how to place widgets correctly inside the Card itself. This is how it looks now:
I want the favorites icon and the image to keep their place, but to move the text to be near the image and to have the "Jean-Paul-Gaultier" text to be closer to the "Le Male" and have it align left.
This is what I have so far:
Widget _myListView(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index){
return Card(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network('${decoded[index]['image']}'),
),
],
),
SizedBox(width: 8,),
Column(
children: <Widget>[
Text(
'${decoded[index]['name']}',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
Row(
children: <Widget>[
Text(
'${decoded[index]['brand']}',
style: TextStyle(
color: Colors.blueGrey,
fontWeight: FontWeight.normal,
fontSize: 12,
),
),
],
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(Icons.favorite_border),
),
],
),
],
),
);
},
);
}
Without the mainAxisAlignment: MainAxisAlignment.space-between the text is indeed closer to the image, but the favorites icon gets right near the text which is something I do not want.
I tried to search for answers but as I'm new to Flutter I don't really know the right keywords so I couldn't find anything.

Answer 1

A much easier approach would be using a ListTile
Widget _myListView(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text("title"),
subtitle: Text("subtitle"),
leading: Container(
width: 48, height: 48,
child: Placeholder(), //place image here replacing the Placeholder widget
),
trailing: IconButton(
icon: Icon(Icons.favorite_border),
onPressed: () {},
),
),
);
},
);
}
which gives us
But if you want your code then here it is
Widget _myListView(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return Card(
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.all(8.0),
child: Placeholder(),
width: 48,
height: 48,
),
SizedBox(
width: 8,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'title',
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
Text(
'subtitle',
style: TextStyle(
color: Colors.blueGrey,
fontWeight: FontWeight.normal,
fontSize: 12,
),
),
],
),
Spacer(),
IconButton(
icon: Icon(Icons.favorite_border),
onPressed: () {},
),
],
),
);
},
);
}
EDIT
to reduce the space between title and subtitle replace the title with following code
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("title",style: Theme.of(context).textTheme.body2,),
Text("subtitle",style: Theme.of(context).textTheme.caption,),
],
),