List Tiles out of container when scrolling

Question

I have a ListViewBuilder inside a container in my UI when I scroll the list tiles get out of the container like so :

This my code :

 return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
      child: Container(

        margin: const EdgeInsets.only(
            left: 30, right: 30, bottom: 20),
        width: getProportionateScreenWidth(600),
        height: getProportionateScreenHeight(300),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(17),
              topRight: Radius.circular(17),
              bottomLeft: Radius.circular(17),
              bottomRight: Radius.circular(17)),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,

          children: [


    

       Expanded(child: ListView.builder(
           shrinkWrap: true,
           physics: const ScrollPhysics(),
           itemCount: snapshot.data!.perimeters.length,
           itemBuilder: (context,index){
             return PerimListTile(
               perimID: snapshot.data!.perimeters[index].perimeterId.toString(),
               perimLabel: snapshot.data!.perimeters[index].label,



             );
           })),



      ],




        ),
      ),
    )

I want the list tiles to stay inside the container even while scrolling , if anyone knows how to solve the issue I'd be grateful , thank you in advance.

Answer 1

Problem

I do not know the details about getProportionateScreenHeight you used but I assume that it returns a double value. The ListView inside the Column is constrained by the height of the container through that.

Solution

Remove the height of the container and try mainAxisSize: MainAxisSize.min on Column.