Question 77620 in Flutter Question posted in
The official Flutter documentation can be found here.

How to disable Listview Stretching on overscrolling – Flutter

I don’t know if stretching is the correct word to describe it.
But it looks like this.
"last message 👋👋" is the last message in this convo and the empty space below is the ‘stretching’. Once I release the touch from my screen it goes back to normal. I want to disable that ‘stretching’ so that nothing happens when the user overscrolls.

ListView code:

ListView.builder(
            controller: _controller1,
            physics: BouncingScrollPhysics(),
            itemCount: snapshot.data!.docs.length,  //snapshot from parent StreamBuilder
            itemBuilder: (context, index) {
              final allowedOrNot = index == 0
                  ? true
                  : compareDate(          // Userdefined function to check if the dates above messages should be displayed or not
                      currentSnap: snapshot.data!.docs[index]
                          .data()['serverTimeStamp'],
                      previousSnap: snapshot.data!.docs[index - 1]
                          .data()['serverTimeStamp']);
              return Column(
                children: [
                  allowedOrNot
                      ? chatDater(    // the date widget (above some messages to indicate the date of conversation)
                          data: dataForChatDater(  // Userdefined function which returns Strings like 'Yesterday', 'Today' for the widget to display
                              snap: snapshot.data!.docs[index]
                                  .data()['serverTimeStamp']),
                        )
                      : const SizedBox(
                          width: 0,
                          height: 0,
                        ),
                  Align(
                    alignment:
                        snapshot.data!.docs[index].data()['sender'] ==
                                widget.usernameOfFriend
                            ? Alignment.centerLeft
                            : Alignment.centerRight,
                    child: MessageBubble(  // The ChatBubble widget used to display the messages
                      timestamp: snapshot.data!.docs[index]
                          .data()['serverTimeStamp'],
                      message: snapshot.data!.docs[index].data()['message'],
                      IsYou: snapshot.data!.docs[index].data()['sender'] ==
                              widget.usernameOfFriend
                          ? false
                          : true,
                    ),
                  ),
                ],
              );
            },
          ),
Tags:

2

Answers


  1. 0

    It is natural behavior of BouncingScrollPhysics.

    If you don’t want to overscroll, you can change it to NeverScrollableScrollPhysics.

    Login or Signup to reply.
  2. 0

    Try shrinkWrap:true in your ListView.builder and mainAxisSize:MainAxisSize.min in Column as follows:

          ListView.builder(
      //other
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return Column(
          mainAxisSize: MainAxisSize.min, //use this
          children: [
            //your children
          ],
        );
      })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search