How to scroll to next row position in Flutter using animation

Question

I have a checklist with questions and when I check a question I want to scroll to next question. How will be this possible in Flutter ? Or what widget should I use ? Or maybe is there a library which is already doing exactly what I need ?

Any help or suggestion will be really apreciated !

Here is my code:

Widget _buildBody() {
    var dbHelper = DBHelper();
    return ListView.builder(
      padding: EdgeInsets.all(10),
      itemCount: 1,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Column(
            children: questionsList
                    ?.map(
                      (question) => Row(
                        children: [
                          Expanded(
                            flex: 4,
                            child: Text(
                              "${question.questionNumber}. ${question.questionDescription}",
                              style: TextStyle(fontSize: 20),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: IconButton(
                              icon: Icon(Icons.check_circle_outline),
                              color: question.questionAnswer == 1
                                  ? Colors.green
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 1;
                                    dbHelper.updateQuestion(question);

                                    print('Yes');
                                  },
                                );
                              },
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: IconButton(
                              icon: Icon(Icons.close),
                              color: question.questionAnswer == 0
                                  ? Colors.red
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 0;
                                    dbHelper.updateQuestion(question);
                                    print('No');
                                  },
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    )
                    ?.toList() ??
                [],
          ),
        );
      },
    );
  }

Thanks in advance !

check this out https://stackoverflow.com/questions/47367917/how-to-scroll-item-in-listview-so-it-is-visible — Lars, Mar 04 '21 at 22:21
its easy to do you just need a scroll listener. Let me know if you still need some help — Antonin GAVREL, Mar 04 '21 at 23:25

Florentin Lupascu · Answer 1 · 2021-03-05T09:45:58.567

I fix it like this:

import 'package:scroll_to_index/scroll_to_index.dart';

final scrollDirection = Axis.vertical;
AutoScrollController controller;
int scrollCounter = -1;

@override
  void initState() {
    super.initState();
    
    controller = AutoScrollController(
        viewportBoundaryGetter: () =>
            Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
        axis: scrollDirection);
  }

Future _scrollToNextQuestion() async {
    setState(() {
      scrollCounter++;

      if (scrollCounter >= questionsList.length) scrollCounter = 0;
    });

    await controller.scrollToIndex(scrollCounter,
        preferPosition: AutoScrollPosition.begin);
    controller.highlight(scrollCounter);
  }

Widget _wrapScrollTag({@required int index, @required Widget child}) =>
      AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: child,
        highlightColor: Colors.black.withOpacity(0.1),
      );

Widget _buildBody() {
    var dbHelper = DBHelper();
    return ListView.builder(
      padding: EdgeInsets.all(10),
      itemCount: 1,
      controller: controller,
      scrollDirection: scrollDirection,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Column(
            children: questionsList?.map<Widget>(
                  (question) {
                    return Row(
                      children: [
                        Expanded(
                          flex: 4,
                          child: Text(
                            "${question.questionNumber}. ${question.questionDescription}",
                            style: TextStyle(fontSize: 20),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: _wrapScrollTag(
                            index: question.questionNumber - 1,
                            child: IconButton(
                              icon: Icon(Icons.check_circle_outline),
                              color: question.questionAnswer == 1
                                  ? Colors.green
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 1;
                                    dbHelper.updateQuestion(question);

                                    print('Yes');
                                  },
                                );
                                _scrollToNextQuestion();
                              },
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: _wrapScrollTag(
                            index: question.questionNumber - 1,
                            child: IconButton(
                              icon: Icon(Icons.close),
                              color: question.questionAnswer == 0
                                  ? Colors.red
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 0;
                                    dbHelper.updateQuestion(question);
                                    print('No');
                                  },
                                );
                                _scrollToNextQuestion();
                              },
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                )?.toList() ??
                [],
          ),
        );
      },
    );
  }

How to scroll to next row position in Flutter using animation

1 Answers1