1

The alignment of the list view is not matching with the heading, how can I do it?

image for reference

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,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
Deval Joshi
  • 163
  • 10

0 Answers0