How to change shape of leading in ListTile in Flutter? - flutter

Question

I want to show an image in a ListTile widget which should looks something like this.
Here is my code:
Padding(
padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 20.0),
child: Card(
color: Colors.white,
child: ListTile(
leading: Container(
child: Image.network((orientation == Orientation.portrait
? image.portrait
: image.landscape),
fit: BoxFit.cover)
),
title: Text(terms[index].title),
subtitle: Text(terms[index].videoNumber.toString() + " Videos"),
trailing: Icon(
Icons.arrow_forward_ios,
color: Colors.lightBlueAccent,
),
),
),
);
This results in below output
What should I do so the image looks spread out as above.

Answer 1

You can set the padding of ListTile to 0:
...
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: ...
);
But even so, you can see that the leading only take the upper half, not the entire height of the card:
...
Card(
color: Colors.blue,
child: ListTile(
contentPadding: EdgeInsets.all(0),
leading: ...
Which result in:
You can use a Stack to include both ListTile and the leading Icons but lots of things have to be hardcorded. In this case, I recommend using ClipRRect with Row:
Padding(
padding: EdgeInsets.symmetric(
vertical: 0.0, horizontal: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 70,
color: Colors.white,
child: Row(
children: <Widget>[
Container(
color: Colors.red,
width: 70,
height: 70,
child: Icon(Icons.cake, color: Colors.white),
),
SizedBox(width: 10),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text('Test Title'),
Text('Test Video',
style: TextStyle(color: Colors.grey))
],
),
),
Icon(Icons.arrow_forward_ios,
color: Colors.blue),
],
),
),
),
);
Result:

Answer 2

Widget buildCard(_user) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
child: Card(
color: Colors.blue.shade100,
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.blue.shade200,
shape: BoxShape.rectangle,
borderRadius:const BorderRadius.only(
topLeft: Radius.circular(4.0),
bottomLeft: Radius.circular(4.0),
),
),
width: 20,
height: 73,
),
const SizedBox(width: 10),
Expanded(
child: ListTile(
title: Text('${_user.state?.email!.substring(0, 6)}'),
subtitle: Text('${_user.state?.createdAt}'),
),
),
//const Icon(Icons.arrow_forward_ios, color: Colors.blue),
],
),
),
),
);
}