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,
        )
    );
  }

}

Solution 1

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.

Solution 2

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,
        )
    );
  }
}

Comments

[Rémi Rousselet]

You should use a stateful widget instead of stateless.

[Rémi Rousselet]

Because then you can have one controller per instance of the widget. Not one static controller used everywhere.

[Rémi Rousselet]

@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.

[And Grow]

yeah it worked. I didn't know the solution would be that simple

[And Grow]

never mind that error just didn't come up because of a different error

[And Grow]

Maybe this would work but then you can't access the getValue function

[Rémi Rousselet]

What do you mean? You can access to the state of a widget from others if you want to.

[And Grow]

how? as far as I know you can only access properties and methods in the stateful widget and not its state

[Rémi Rousselet]

See docs.flutter.io/flutter/widgets/GlobalKey-class.html or docs.flutter.io/flutter/widgets/BuildContext/…

[And Grow]

I don't know what is going on anymore, now this works

[Jamshed Alam]

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

[Shoaib Khan]

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()