CODEWITHSUNDEEP
firebaseflutterdart
theboshy
theboshy

Reputation: 418

Flutter LisView.builder scroll to bottom

I'm building an app that handles messaging between users and I ran into a problem when a user sends a new message and the system keyboard is open the new message is hidden by it,

I need my ListView.builder to when a new message is sent scroll down to show the last message, So far and tried using the scrollController like this

  _scrollController.jumpTo(_scrollController.position.maxScrollExtent)

but is not doing anything.

So am looking for a way to resolve this problem this is my code

SingleChildScrollView(
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: userChat.value.messages!.length,
                controller: _scrollController,
                itemBuilder: (context, index) {
                  /*
                * DateChip(
                    date: new DateTime(now.year, now.month, now.day - 2),
                  ),
                * */
                  return Column(
                    children: [
                      BubbleNormal(
                        text: '${userChat.value.messages![index].message}',
                        isSender: userChat.value.messages![index].messageId ==
                            currentUser.uidToken,
                        color: Constants.themeColor2,
                        bubbleRadius: 20.0,
                        textStyle: TextStyle(
                            fontSize: 18,
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                            fontFamily: 'Roboto'),
                      ),
                      BubbleNormal(
                        text: DateFormat('hh:mm a')
                            .format(userChat.value.messages![index].dateTime),
                        isSender: userChat.value.messages![index].messageId ==
                            currentUser.uidToken,
                        color: Constants.themeColor2,
                        bubbleRadius: 20.0,
                        textStyle: TextStyle(
                            fontSize: 12,
                            color: Colors.black,
                            fontWeight: FontWeight.w400,
                            fontFamily: 'Roboto'),
                      )
                    ],
                  );
                }),
          )

Upvotes: 1

Views: 129

Answers (2)

My Car
My Car

Reputation: 4556

Try this:

Timer(
  Duration.zero,
  () => {
    _scrollController
      .jumpTo(_scrollController.position.maxScrollExtent)
  },
);

Upvotes: 1

belinda.g.freitas
belinda.g.freitas

Reputation: 1157

Try this:

SchedulerBinding.instance?.addPostFrameCallback((_) {
   _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 400),
          curve: Curves.fastOutSlowIn);
});

Upvotes: 1

Related Questions