Flutter ScrollablePositionedList not able jumpTo Index issue

Question

I apply ScrollablePositionedList, but it doesn't work. When I click on the number, it did not jump to the index.

Below are the sample images that I want to achieve.

When I clicked number 10, it should jump to Item 10 as below (here the list of numbers on the top should be scroll up as well and not visible):

However, when I click on the number it does not jump to the index. Below are the code. I guess there is something wrong with my code, but I don't know how to solve it.

  ItemScrollController controller = ItemScrollController();

  return Column(
    children: [
      Text("Click the number below to jump to Index"),
      Wrap(
        alignment: WrapAlignment.center,
        children: [
          for (int i = 0; i < totalItems; i++)
            InkWell(
                onTap: () {
                  controller.jumpTo(index: index);
                },
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    (i).toString(),
                    style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                )
              )
        ],
      ),
      ScrollablePositionedList.builder(
          shrinkWrap: true,
          itemScrollController: controller,
          itemCount: totalItems.length,
          itemBuilder: (context, index) {
            return ConstrainedBox(
              constraints: const BoxConstraints(minHeight: 50, maxHeight: 200),
              child: Container(
                color: Color.fromARGB(
                    255,
                    Random().nextInt(255),
                    Random().nextInt(255),
                    Random().nextInt(255)),
                height: 100.0 * index * 0.1,
                child: ListTile(
                  title: Text(
                    "Item $index",
                    style: const TextStyle(fontSize: 24,fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            );
          }
      ),
    ],
  );

Answer 1

In your code:

for (int i = 0; i < totalItems; i++)
            InkWell(
                onTap: () {
                  controller.jumpTo(index: index);
                },

You haven't shared what index is, but the key problem should be with it.

As you can see, your looping over totalItems and for each item, we have the variaiable i. But you aren't using i, you are using index instead.

So, make use of i:

 InkWell(
    onTap: () {
 controller.jumpTo(index: i);
 },

Complete runnable example:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MyApp(),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final totalItems = List.generate(100, (index) => index);
  ItemScrollController controller = ItemScrollController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Click the number below to jump to Index"),
        Wrap(
          alignment: WrapAlignment.center,
          children: [
            for (int i = 0; i < totalItems.length; i++)
              InkWell(
                  onTap: () {
                    controller.jumpTo(index: i);
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      (i).toString(),
                      style: const TextStyle(
                          fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                  ))
          ],
        ),
        Expanded(
          child: ScrollablePositionedList.builder(
              itemScrollController: controller,
              itemCount: totalItems.length,
              itemBuilder: (context, index) {
                return ConstrainedBox(
                  constraints:
                      const BoxConstraints(minHeight: 50, maxHeight: 200),
                  child: Container(
                    color: Color.fromARGB(255, Random().nextInt(255),
                        Random().nextInt(255), Random().nextInt(255)),
                    height: 100.0 * index * 0.1,
                    child: ListTile(
                      title: Text(
                        "Item $index",
                        style: const TextStyle(
                            fontSize: 24, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                );
              }),
        ),
      ],
    );
  }
}