The alignment of the list view is not matching with the heading, how can I do it?
I have used a code for doing this has been mentioned below.
I have created a taskCard widget and that widget contains two child in one column, so in that 1st child has been used for creating the heading and second child has been used for showing list data, but the list data is not align properly with the heading title.
Widget _taskCard() {
return Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: appColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
topLeft: Radius.circular(5))),
child: Center(
child: ListTile(
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
title: Container(
width: SizeConfig.screenWidth,
child: Row(children: <Widget>[
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.all(2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Tasks',
style: TextStyle(
color: Colors.white,
fontSize: 11,
),
),
Text(
'Status',
style: TextStyle(
color: Colors.white,
fontSize: 11,
),
),
Text(
'Mark',
style: TextStyle(
color: Colors.white,
fontSize: 11,
),
),
],
),
),
),
),
]),
),
),
),
),
ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: proTaskModel!.tasks!.length,
padding: EdgeInsets.all(0),
itemBuilder: (context, i) {
return ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: ((context) => TaskDetail()),
),
);
},
visualDensity: VisualDensity(horizontal: 0, vertical: -4),
title: Container(
width: SizeConfig.screenWidth,
child: Row(children: <Widget>[
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.all(2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
tasks.taskName!,
style: TextStyle(
color: appColor,
fontSize: 10,
),
),
Text(
tasks.taskStatus!,
style: TextStyle(
color: appColor,
fontSize: 10,
),
),
Icon(
Icons.check_box_outline_blank,
size: 20,
color: appColor,
)
],
),
),
),
),
]),
),
);
},
separatorBuilder: (context, index) {
return Divider(
height: 1,
);
},
),
],
),
),
);
}