I am trying to build a bottom sheet in the below code when i am using Column,the code works fine,but doesnt work with Listview

Question

showModalBottomSheet(  
context: context,  
isScrollControlled: true,  
isDismissible: true,  
shape: const RoundedRectangleBorder(  
             borderRadius:
             BorderRadius.vertical(top: Radius.circular(16))),  
             builder: (context) => DraggableScrollableSheet(  
                       initialChildSize: 0.4,  
                       minChildSize: 0.2,  
                       maxChildSize: 0.75,  
                       expand: false,   
                       builder: (_, controller) => Column(  
                                             children: [  
                                                 Icon(  
                                                 Icons.remove,  
                                                 color:     
                                            Colors.grey[600],),
                                             Expanded(
                                              child: 
                                              ListView.builder(                                                    
                                         controller: controller,  
                                         itemCount: 100,  
                                        itemBuilder: (, index)  {  
                                                    return Card(  
                                                  child: Padding(  
                                                  padding: 
                                               EdgeInsets.all(8),  
                         child: Text("Element at index($index)"),  
                                  ),  
                                );  
                              },  
                           ),  
                        ),  
                    ],  
               ),  
         ), 
    ); 

• In this line , builder: (_, controller) => Column(

• when i use the Column,i get to see the list(scrollable),but when i use Listview instead of Column,everythings goes invisible

Answer 1

Add shrinkwrap:true in ListView and ListView.builder.

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      isDismissible: true,
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(16))),
      builder: (context) => DraggableScrollableSheet(
        initialChildSize: 0.4,
        minChildSize: 0.2,
        maxChildSize: 0.75,
        expand: false,
        builder: (_, controller) => ListView(
          shrinkWrap: true,
          children: [
            Icon(
              Icons.remove,
              color: Colors.grey[600],
            ),
            ListView.builder(
              controller: controller,
              itemCount: 100,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return Card(
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: Text("Element at index($index)"),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );