flutter ScrollController attached to multiple scroll views

Question

when multiple instances of widget are rendered and the getValue method is called flutter throws the error ScrollController attached to multiple scroll views. I'm assuming this is because they all are using the same controller but I don't know a way to fix this without creating a separate widget for each time it is used. Is there a better way to fix this?

class NumScroller extends StatelessWidget{
  final int max,min;
  final double height,width;
  final TextAlign alignment;

  static ScrollController controller;

  NumScroller({this.height,this.width,this.alignment,this.min,this.max, initialOffset}){
    controller = new ScrollController(initialScrollOffset: initialOffset);
  }

  getValue() => (controller.offset~/height) + min;

  @override
  Widget build(BuildContext context) {
    return new Container(
        width: width,
        height: height,
        child: ListView.builder(itemBuilder: (context, index) {
          return new Container(height: height, child:Text((max - index).toString(),textAlign: alignment,));
          },
          itemCount: max - min+1,
          controller: controller,
          physics: PageScrollPhysics(),
          itemExtent: height,
        )
    );
  }

}

Because then you can have one controller per instance of the widget. Not one static controller used everywhere. — Rémi Rousselet, Sep 24 '18 at 18:19
Sorry I didn't understand. Even with `Stateless` we can have one controller per instance of the widget — Dinesh Balasubramanian, Sep 24 '18 at 18:25
@DineshBalasubramanian The controller should be kept. Recreating a new one every time a props change (which is what happens when using StatelessWidget) has undesired effects. — Rémi Rousselet, Sep 24 '18 at 18:28
I have already added a similar answer here please refer to [ScrollController attached to multiple scroll views - Answer](https://stackoverflow.com/a/70672454/14155787) — Shoaib Khan, Jan 12 '22 at 08:23

score 10 · Accepted Answer · answered Sep 24 '18 at 18:12

10

As you are telling when multiple instances are rendered, you are getting this error. When your ScrollController is multiple(one for one view), you will not get any problem. But you have only one ScrollController (because you have static).

Remove the static and it should work.

Please lemme know if it didn't work.

answered Sep 24 '18 at 18:12

Dinesh Balasubramanian

20,532
7
64
57

yeah it worked. I didn't know the solution would be that simple – And Grow Sep 24 '18 at 18:21
never mind that error just didn't come up because of a different error – And Grow Sep 24 '18 at 18:27
I don't know what is going on anymore, now this works – And Grow Sep 30 '18 at 19:24
i created like this way for my 3 listview.builder. it shows same error. So i can not track/listen each list scroll. _controller = ScrollController(); _controller.addListener(_scrollListener); _controller2 = ScrollController(); _controller2.addListener(_scrollListener2); _controller3 = ScrollController(); _controller3.addListener(_scrollListener3); @Dinesh - And – Jamshed Alam Nov 21 '21 at 05:29
1

I am also facing the same issue even I have separate ScrollController for each page but the problem is occurring when I am navigating to next page and when I am getting back to the previous page but without ```Navigator.pop()``` then it is throwing error. otherwise it is working fine when I am getting back by ```Navigator.pop()``` – Shoaib Khan Jan 11 '22 at 18:39

score 8 · Answer 2 · answered Sep 24 '18 at 18:24

Instead of using a static controller, you should have one controller per widget instance.

You cannot store your controller inside a StatelessWidget though (even if the compiler will allow it).

You need a StatefulWidget for that, or else when your widget is updated you will create a new controller again. Leading to weird behaviors.

Here the final code:

class NumScroller extends StatefulWidget{
  final int max,min;
  final double height,width;
  final TextAlign alignment;

  NumScroller({this.height,this.width,this.alignment,this.min,this.max, initialOffset});

  @override
  NumScrollerState createState() {
    return new NumScrollerState();
  }
}

class NumScrollerState extends State<NumScroller> {
  final ScrollController controller = ScrollController();

  getValue() => (controller.offset~/widget.height) + widget.min;

  @override
  Widget build(BuildContext context) {
    return new Container(
        width: widget.width,
        height: widget.height,
        child: ListView.builder(itemBuilder: (context, index) {
          return new Container(height: widget.height, child:Text((widget.max - index).toString(),textAlign: widget.alignment,));
          },
          itemCount: widget.max - widget.min+1,
          controller: controller,
          physics: PageScrollPhysics(),
          itemExtent: widget.height,
        )
    );
  }
}

Maybe this would work but then you can't access the getValue function — And Grow, Sep 24 '18 at 18:52
What do you mean? You can access to the state of a widget from others if you want to. — Rémi Rousselet, Sep 24 '18 at 18:54
how? as far as I know you can only access properties and methods in the stateful widget and not its state — And Grow, Sep 24 '18 at 19:01
See https://docs.flutter.io/flutter/widgets/GlobalKey-class.html or https://docs.flutter.io/flutter/widgets/BuildContext/ancestorStateOfType.html — Rémi Rousselet, Sep 24 '18 at 19:04

score 0 · Answer 3 · answered May 05 '23 at 16:19

0

I had some screens in a bottomNavigationBar and I solved adding a key to the widget with the problem.

key: GlobalKey(debugLabel: 'unique_widget_key'),

answered May 05 '23 at 16:19

Álvaro Agüero

4,494
1
42
39

flutter ScrollController attached to multiple scroll views

3 Answers3

Linked