flutter how to make card in leading of listview - flutter

Question

I want to make UI like my upper image but I cant make like that But it is not being made as you are seeing in the image below.
I want to make leading of ListTile part like this .
But I can't make it please help me.
this is my code and UI
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.only(top: 30, left: 10, right: 10),
child: Column(
children: [
Row(
children: [
Text(
'Your rooms',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Spacer(),
Card(
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
children: [
Text('add',
style: TextStyle(fontSize: 20, color: Colors.grey)),
Icon(
Icons.add,
size: 20,
color: Colors.grey,
)
],
),
),
)
],
),
SizedBox(
height: 20,
),
Container(
height: 110,
width: 380,
// color: Colors.red,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Color(0xffbbf0e3),
),
child: Center(
child: ListTile(
leading: Container(
// height: 10,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
elevation: 1,
color: Colors.white,
child: Container(
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(25),
shape: BoxShape.circle,
// color: Colors.red,
),
child: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWsvdJGKCRYW_Wb-K40Po2JQ8LpooWoilw&usqp=CAU'),
),
),
),
),
// leading: Card(
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(30.0)),
// elevation: 1,
// color: Colors.white,
// child: Container(
// height: 80,
// width: 75,
// decoration: BoxDecoration(
// // borderRadius: BorderRadius.circular(25),
// shape: BoxShape.circle,
// // color: Colors.red,
// ),
// child: CircleAvatar(
// radius: 25,
// backgroundImage: NetworkImage(
// 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWsvdJGKCRYW_Wb-K40Po2JQ8LpooWoilw&usqp=CAU'),
// ),
// )),
title: Text(
"Living room",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
),
subtitle: Text(
'3 turned on',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
color: Colors.green),
),
trailing: Card(
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('5',
style: TextStyle(
fontSize: 20, color: Colors.grey)),
SizedBox(
width: 1,
),
Icon(
Icons.electrical_services,
textDirection: TextDirection.rtl,
size: 20,
color: Colors.grey,
)
],
),
),
),
),
),
),
)
],
),
),
);
}
}
I am making like this .

Answer 1

I removed some unnecessary Lines of Code and voilà there you go:
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.only(top: 30, left: 10, right: 10),
child: Column(
children: [
Row(
children: [
Text(
'Your rooms',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Spacer(),
Card(
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
children: [
Text('add',
style: TextStyle(fontSize: 20, color: Colors.grey)),
Icon(
Icons.add,
size: 20,
color: Colors.grey,
)
],
),
),
)
],
),
SizedBox(
height: 20,
),
Container(
height: 110,
width: 380,
// color: Colors.red,
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Color(0xffbbf0e3),
),
child: Center(
child: ListTile(
leading: CircleAvatar( // I ONLY CHANGED THIS PART
radius: 25,
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWsvdJGKCRYW_Wb-K40Po2JQ8LpooWoilw&usqp=CAU'),
),
// leading: Card(
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(30.0)),
// elevation: 1,
// color: Colors.white,
// child: Container(
// height: 80,
// width: 75,
// decoration: BoxDecoration(
// // borderRadius: BorderRadius.circular(25),
// shape: BoxShape.circle,
// // color: Colors.red,
// ),
// child: CircleAvatar(
// radius: 25,
// backgroundImage: NetworkImage(
// 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkNWsvdJGKCRYW_Wb-K40Po2JQ8LpooWoilw&usqp=CAU'),
// ),
// )),
title: Text(
"Living room",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
),
subtitle: Text(
'3 turned on',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
color: Colors.green),
),
trailing: Card(
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('5',
style: TextStyle(
fontSize: 20, color: Colors.grey)),
SizedBox(
width: 1,
),
Icon(
Icons.electrical_services,
textDirection: TextDirection.rtl,
size: 20,
color: Colors.grey,
)
],
),
),
),
),
),
),
)
],
),
),
);
}
}
Output