Flutter ScrollablePositionedList not scrolling to a specific index

Question

In my flutter application, I'm trying to open a bookmark and scroll to the specific index. I'm using ScrollablePositionedList for it but it's not working. The page loads fine but doesn't scroll to the specified index, the debugger shows bookmarkIndex's value but scrollableListState=null. This is my code:

 late final ItemScrollController itemScrollController;
  late final ItemPositionsListener itemPositionsListener ;

void initState() {
    super.initState();

    _sharedPreferenceManager = Provider.of<SharedPreferenceManager>(context, listen: false);
    _databaseManager = Provider.of<DatabaseManager>(context, listen: false);
    _databaseManager.surahStatusWithoutNotifyer = DataStatus.Initial;
    _bookmarkManager = Provider.of<BookmarkManager>(context, listen: false);
    _bookmarkManager.bmStatusWithoutNotifyer = DataStatus.Initial;
    itemScrollController = ItemScrollController();
    itemPositionsListener = ItemPositionsListener.create();

    _loadBookmarks();

 if(_databaseManager.gotoBookmark)
      {
        Future.delayed(Duration(milliseconds: 500), () {
          if(itemScrollController.isAttached){
            itemScrollController.scrollTo(
                index: _databaseManager.bookmarkIndex,
                duration: Duration(seconds: 2),
                curve: Curves.easeInOutCubic);
          }
          else{
            print("no view");
          }
            _databaseManager.gotoBookmark=false;
        });

      }
}


 Widget returnListview() {
    final ItemScrollController itemScrollController = ItemScrollController();
    final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();

    return Column(
      textDirection: TextDirection.rtl,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: SizedBox(
            height: 200.0, // Adjust the height as needed
            child: NotificationListener<ScrollEndNotification>(
              child: ScrollablePositionedList.builder(
                itemScrollController: itemScrollController,
                itemCount: _databaseManager.surahData.ayahList.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () async {
                      newBookmark = _createBookmark(index);
                      _addBookmark();
                    },
                    onLongPress: () {
                      newBookmark = _createBookmark(index);
                      _deleteBookmark(newBookmark);
                    },
                    child: Card(
                      borderOnForeground: true,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          showBSMLSV(index),
                          Wrap(
                            textDirection: TextDirection.rtl,
                            children: makeSurahListview(index),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
              onNotification: (notification) {
                // Handle scroll notification if needed
                return true;
              },
            ),
          ),
        ),
      ],
    );
  }

Kindly help me figure out what am I doing wrong here. Thank you

Answer 1

Inside the returnListview method, you declared two local variables that shadow the controller and listener that you defined in the state. Remove these local variables so that your widget actually uses the controller and listener from the state.

Widget returnListview() {
  // Remove these 2 lines
  final ItemScrollController itemScrollController = ItemScrollController();
  final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();

  // ...
}