Scroll To Index in ListView Flutter

Question

In my application I am listing in an appBar several Containers that have the names of product categories, these categories are being listed in the body with their respective products.

The ListView that is in the appBar has the same indexes of the ListView of the body, so the idea was to press the index 'x' in the appBar and the user would be redirected to the index 'x' in the body.

I tried many solutions, one of then was the package https://pub.dev/packages/scrollable_positioned_list, but it did not works because when calling the function to scroll my list just disappears.

Here's de code:

return Scaffold(
  backgroundColor: Colors.white,
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(120),
    child: Column(
      children: [
        AppBar(...),
        Expanded(
          child: Container(
            color: AppColors.primary,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.listaProdutos.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.symmetric(...),
                  child: GestureDetector(
                    child: Container(
                      decoration: BoxDecoration(...),
                      child: Padding(...),
                        child: Center(
                          child: Text(
                            widget.listaProdutos[index].dsGrupo,
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                    onTap: () {
                      SHOULD SCROLL TO INDEX
                    },
                  ),
                );
              },
            )
          ),
        ),
      ],
    ),
  ),
  body: SingleChildScrollView(
    child: Column(
      children: [
        Container(
          child: ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: widget.listaProdutos.length,
            itemBuilder: (context, indexGrupo) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Card(...),
                  ListView.builder(..),
                ],
              );
            },
          ),
        ),
      ],
    ),
  ),
);

Does this answer your question? [flutter ListView scroll to index not available](https://stackoverflow.com/questions/54039684/flutter-listview-scroll-to-index-not-available) — OMi Shah, Nov 14 '22 at 19:29
No, cause scrollable_positioned_list did not work and the size of widgets are not known or equal. — Roberto Henrique, Nov 14 '22 at 19:37
Maybe you can define anchors to categories and scroll to that anchors on tap? Refer to this: https://stackoverflow.com/questions/66415605/how-to-scroll-withing-a-widget-with-a-button/70816613#70816613 — Muhammad Hussain, Nov 14 '22 at 19:38
The categories are not fixed, they may vary by user, is there a way to use anchors dynamically? — Roberto Henrique, Nov 14 '22 at 19:41

score 1 · Answer 1 · answered Nov 14 '22 at 19:33

You can use PageView with scrollDirection: Axis.vertical,


class TFW extends StatefulWidget {
  const TFW({super.key});

  @override
  State<TFW> createState() => _TFWState();
}

class _TFWState extends State<TFW> {
  final PageController controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          bottom: PreferredSize(
        preferredSize: Size.fromHeight(100),
        child: Expanded(
          child: ListView.builder(
            itemCount: 100,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {
                  controller.animateToPage(index,
                      duration: Duration(milliseconds: 400),
                      curve: Curves.easeIn);
                },
                child: SizedBox(width: 100, child: Text("$index")),
              );
            },
          ),
        ),
      )),
      body: PageView.builder(
        controller: controller,
        itemCount: 100,
        scrollDirection: Axis.vertical,
        itemBuilder: (context, index) {
          return Container(
            color: index.isEven ? Colors.red : Colors.blue,
            child: Text("$index"),
          );
        },
      ),
    );
  }
}

But in this case the PageView should return a Column, I got many errors because of that. — Roberto Henrique, Nov 14 '22 at 19:51
Can you try `flutter clean` and rebuild the app, on basic level it should work fine with Column — Md. Yeasin Sheikh, Nov 14 '22 at 19:52
Did not work, by the way I really needed it to be a ListView and not a PageView as it would change the dynamics for the user. — Roberto Henrique, Nov 14 '22 at 19:56
Yes, all dynamic, and there is a ListView inside another, as I described below. — Roberto Henrique, Nov 14 '22 at 20:00

score 0 · Answer 2 · answered Nov 16 '22 at 16:46

Fortunately I was able to resolve the problem. To help members who may have the same doubt I will register here the solution that worked for me. (sorry for the bad English)

Question: Why ScrollablePositionedList wasn't working? (as I mentioned iniatily)

Response: I was using the ScrollablePositionedList within a SingleChildScrollView, and for some reason when using the scrollTo or jumpTo function, the information that was visible simply disappeared. For that reason, I was trying to find a way to get success using a ListView (what came to nothing).

Solution: ... Trying to figure out why the ScrollablePositionedList wasn't working as it should ...

The initial structure was:

body: SingleChildScrollView(
  child: Column(
    children: [
      Container(
        child: ScrollablePositionedList.builder(

Changed for:

body: ScrollablePositionedList.builder(

The only reason for all this confusion is that ScrollablePositionedList's indexing functions for some reason don't work as they should if it's inside a SingleChildScrollView. So, take off SingleChildScrollView and all good.

Scroll To Index in ListView Flutter

2 Answers2