My ListTile widgets of a ListView builder are not scrollable and are displaying render issues

Question

The widgets(Listtile) inside the listview builder is not scrollable. I looked for similar problems here in the internet. Most of them doesn't work. The database functions works perfectly like saving into firebase, deleting data into firebase but the retrieved data from the firebase are not scrollable.

This is my code of stream builder widget which returns the list view builder:

StreamBuilder<QuerySnapshot?>(
              stream: FirebaseFirestore.instance.collection('LoanFriends').snapshots(),
              builder: (context,snapshot){
                if(!snapshot.hasData){
                  return CircularProgressIndicator();
                }
                else {
                  return ListView.builder(
                      shrinkWrap: true,
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder:(context, index){
                        return CustomCard(snapshot: snapshot.data!, index: index,);
                      });
                }
              }
          ),
class CustomCard extends StatelessWidget {
  final QuerySnapshot snapshot;
  final int index;

  CustomCard({required this.snapshot, required this.index});

  @override
  Widget build(BuildContext context) {
    var docID = snapshot.docs[index].id;
        return ListTile(
          title: Text((snapshot.docs[index].data()as dynamic)['name']),
          subtitle: Text((snapshot.docs[index].data()as dynamic)['address']),
          leading: CircleAvatar(
            radius: 20,
            child: Text((snapshot.docs[index].data()as dynamic)['name'][0]),
          ),
          trailing: IconButton(
            icon: Icon(FontAwesomeIcons.ellipsisV),
            onPressed: () {
              Dialogs.materialDialog(
                  msg: 'Are you sure ? You can\'t undo this',
                  title: "Delete",
                  color: Colors.white,
                  context: context,
                  actions: [
                    IconsOutlineButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      text: 'Cancel',
                      iconData: Icons.cancel_outlined,
                      textStyle: TextStyle(color: Colors.grey),
                      iconColor: Colors.grey,
                    ),
                    IconsButton(
                      onPressed: (){
                        var collectionreference = FirebaseFirestore.instance.collection('LoanFriends');
                        collectionreference.doc(docID).delete();
                        Navigator.pop(context);
                      },
                      text: 'Delete',
                      iconData: Icons.delete,
                      color: Colors.red,
                      textStyle: TextStyle(color: Colors.white),
                      iconColor: Colors.white,
                    ),
                  ]);
            },

          ),
        );
  }
}

The output of the code after i add physics: Scrollphysics(), in listview builder is:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 124 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///C:/Users/Acer/StudioProjects/budgetapp/lib/innerscreens/wallet_screen.dart:28:13
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

Otherwise wrap your listview builder with singleChildScrollView — Jahidul Islam, Oct 26 '21 at 09:49
It still doesn't work, I don't know what to do at this stage — NewbieProgrammer, Oct 26 '21 at 09:56

score 0 · Answer 1 · answered Oct 26 '21 at 16:38

Finally, I got the solution. The problem with my code was that it was not getting height that UI want for rendering. I gave bounded height by wrapping the listview.builder inside a container with a bounded height.

The final code:

StreamBuilder<QuerySnapshot?>(
              stream: FirebaseFirestore.instance.collection('LoanFriends').snapshots(),
              builder: (context,snapshot){
                if(!snapshot.hasData){
                  return LinearProgressIndicator();
                }
                else {
                  return Expanded(
                    child: Container(
                      height: 300,
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: snapshot.data!.docs.length,
                          itemBuilder:(context, index){
                              return CustomCard(snapshot: snapshot.data!, index: index,);
                          }),
                    ),
                  );
                }
              }
          ),

My ListTile widgets of a ListView builder are not scrollable and are displaying render issues

1 Answers1