How can I use ClipRRect and ListTile inside Row? - flutter

Question

I want to use ClipRRect and ListTile inside Row but it gives an error. Please help me to resolve this error.
Code
body: Column(
children: [
SizedBox(height: 20),
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
child: Row(
children: [
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image(image: AssetImage('mobile1.jpg'), ),
), ),
ListTile(
title: Text("I Phone 6"),
subtitle: Text("data"),
)
])),
]
), );

Answer 1

Solution:
This is an overflow problem.
It can be solved like this, (has some extras 😉)
return Scaffold(
body: Column(
children: <Widget>[
SizedBox(height: 20),
Card(
// this elevation is purely for shape and is not related to
// solving the problem.
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
// this padding widget is purely for shape and is not related to
// solving the problem.
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Container(
// here I added some height and width so the image
// follows them and be smaller or larger than the card.
width: 130,
height: 130,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
// your image, I used a network one.
//
// child: Image(
// image: AssetImage('mobile1.jpg'),
// ),
child: Image.network(
"https://images.pexels.com/photos/699122/pexels-photo-699122.jpeg",
// this line makes the image cover the area, this will
// allow the roundness to appear.
fit: BoxFit.cover,
),
),
),
// this expanded widget makes the list tile take the empty
// space after the image and not any less or more.
Expanded(
child: ListTile(
title: Text("I Phone 6"),
subtitle: Text("data"),
),
),
],
),
),
),
],
),
);
Result:

Answer 2

For the exact solving you need to give the stacktrace. Thought it was a layout overflow issue and I solved as follows:
Column(children: [
SizedBox(height: 20),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Row(
children: [
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image(
image: AssetImage('mobile1.jpg'),
),
),
),
Expanded(
child: ListTile(
title: Text("I Phone 6"),
subtitle: Text("data"),
),
)
])),
])