CODEWITHSUNDEEP
flutterdartanimationscrollscrollcontroller
Kamand Shayegan
Kamand Shayegan

Reputation: 37

ScrollController doesn't scroll ListView to bottom + AnimatedContainer doesn't work

I have a list of report items.

I initialised a scrollController here:

 class ReportList extends StatelessWidget {

  ReportList({Key? key}) : super(key: key);

  final ScrollController scrollController = ScrollController();

  scrollDown() {
    scrollController.animateTo(scrollController.position.maxScrollExtent,
        duration: const Duration(seconds: 1), curve: Curves.bounceOut);
  }

I also have a list view with the controller, and I want the list view to stroll to bottom when the last item is selected:

ListView.separated(
        controller: scrollController,
        itemCount: 13,
        itemBuilder: (_, index) {
          return Column(
            children: [
              ReportItem(
                onClick: () {
                  viewModel.setCommentReportStat(index);
                  if (index == 12 && viewModel.commentReportStat[12]) {
                    scrollDown();
                  }
                  debugPrint(viewModel.commentReportStat.toString());
                },
                isSelected: viewModel.commentReportStat[index],
                title: CommentReport.items[index],
              ),
              //show additional message field to the user
              if (index == 12 && viewModel.commentReportStat[12])
                AnimatedContainer(
                  duration: const Duration(seconds: 1),
                  child: MessageField(commentId: commentId),
                )
            ],
          );
        },
        separatorBuilder: (_, index) => const SizedBox(
          height: 16,
        ),
      )

Everything about the state management works since the message field appears as the user clicks on the last item.

My problem in general is that neither does message field appear with the animated container which is wrapped around it, nor does it scroll down!

How it is right now: enter image description here

What I want to happen: enter image description here

(If I scroll manually, I can see the entire message field, but I want this to be automated using the scroll controller)

Upvotes: 0

Views: 665

Answers (1)

rasityilmaz
rasityilmaz

Reputation: 1389

instead of this

 if (index == 12 && viewModel.commentReportStat[12])
                AnimatedContainer(
                  duration: const Duration(seconds: 1),
                  child: MessageField(commentId: commentId),
                )

use this

AnimatedCrossFade(
  duration: const Duration(seconds: 1),
  firstChild: const SizedBox(),
  secondChild: MessageField(commentId: commentId),
  crossFadeState: (index == 12 && viewModel.commentReportStat[12]) ? CrossFadeState.showSecond : CrossFadeState.showFirst,
)

You can also use this function if you want to scroll to the end of the page when an event occurs.

toMaxScroll() {
       _scrollController.animateTo(_scrollController.position.maxScrollExtent,duration:const Duration(milliseconds:300),curve:Curves.easeIn);
    }

Upvotes: 1

Related Questions