I am trying to build a list with all countries, and I need to add a gray bottom line to all countries.

But there is a problem when I try to implement this feature. The width of this border is cut from left and right and I don't know why.

How to expand this border to be the full weight of ListView?

I want this

But I only get results like this:

This is how it looks like with my code

This is my code:

class Countries extends StatefulWidget {
  const Countries({super.key});

  @override
  State<Countries> createState() => _CountriesState();
}

class _CountriesState extends State<Countries> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
            height: 235,
            child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 12, right: 12),
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: AppColors.gray2F2D2D),
                          borderRadius: BorderRadius.circular(8.0)),
                      child: Column(
                        children: [
                          Flexible(
                            child: ListView.builder(
                              itemCount: countries.length,
                              scrollDirection: Axis.vertical,
                              shrinkWrap: true,
                              itemBuilder: (context, index) {
                                return ListTile(
                                  title: Container(
                                    decoration: BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(width: 1, color: AppColors.gray2F2D2D)
                                      )
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                        top: 16,
                                        bottom: 16,
                                        left: 20
                                      ),
                                      child: Text(
                                        countries[index],
                                        style: const TextStyle(
                                            color: AppColors.grayA0A0A0,
                                            fontSize: 16,
                                            fontWeight: FontWeight.w500),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
          ),
  }
}

CodePudding user response：

Try add contentPadding: EdgeInsets.zero to your ListTile widget:

return ListTile(
   contentPadding: EdgeInsets.zero,
   // your item widget
)

Moreover, I see you have a Padding left and right 12 outside, if you don't need it then remove it, then your border line will full screen