Flutter The Scrollbar's ScrollController has no ScrollPosition attached

Question

I get this error when using the AppBar:

The Scrollbar's ScrollController has no ScrollPosition attached.

This is my CustomScrollBar:

class CustomScrollBar extends StatelessWidget {
  final Widget child;
  final ScrollController scrollController;

  const CustomScrollBar({
    required this.scrollController,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return RawScrollbar(
      thumbColor: AppColors.gray,
      radius: Radius.circular(8),
      thickness: 4,
      isAlwaysShown: true,
      controller: scrollController,
      child: child,
    );
  }
}

I should be always visible. And this is how I use it:

child: CustomScrollBar(
              scrollController: _scrollControllerForScrollBar,
              child: SingleChildScrollView(
                controller: _scrollControllerForScrollBar,
                child: Padding(
                  padding: EdgeInsets.all(7.0.scaled),
                  child: Container(
                    width: double.infinity,
                    child: Text(
                      'any text bla bla bla \n\n\n this is a lot of \n text \n .'
                    ),
                  ),
                ),
              ),
            ),

As you can see both the ScrollBar and the SingleChildScrollView use the same ScrollController. I have no idea why this error occurs. Any idea what I am missing here?

Me too same problem , I will let you know when I find the solution] — Balaji, Nov 23 '21 at 15:26
In your CustomScrollBar, you need to assign the scrollController to RawScrollBar. — Sami Issa, Dec 02 '21 at 12:43
@SamiIssa Ah I missed that in the question, in my code it is attached — Chris, Dec 02 '21 at 15:25
Here is some work around https://stackoverflow.com/questions/52114535/scrollcontroller-not-attached-to-any-scroll-views — Uzair Leo, Dec 02 '21 at 15:29

jaredbaszler · Accepted Answer · 2022-03-16T16:07:34.963

61

I was using a ScrollBar with a ListView widget and was getting this error in the debug console. To get rid of it, I had to set the ScrollController on both widgets.

final yourScrollController = ScrollController();

Scrollbar(
  isAlwaysShown: true,
  thickness: 10,
  controller: yourScrollController, // Here 
  child: ListView.builder(
    padding: EdgeInsets.zero,
    scrollDirection: Axis.vertical,
    controller: yourScrollController, // AND Here
    itemCount: yourRecordList?.length
    ....
  )
)

edited Mar 16 '22 at 16:07

answered Mar 16 '22 at 01:00

jaredbaszler

3,941
2
32
40

3

This also works if your child is `SingleChildScrollView` instead of `ListView.builder`. – bitinerant Oct 08 '22 at 16:33

score 6 · Answer 2 · answered Nov 16 '22 at 00:57

Let's assume you're using both Scrollbar widget and ListView widget as a child of the scrollbar - Both of them should have the same controller as :

ScrollController _controller = ScrollController();

     Scrollbar(
              controller: _controller,
              child: ListView(
                controller: _controller,
           ....), // ListView
    ) // Scrollbar

score 2 · Answer 3 · answered Jan 19 '22 at 10:32

Remove the scrollController entirely and that should fix the problem. that is how I fixed my code so your code should look something like this

class CustomScrollBar extends StatelessWidget {


 final Widget child;

  const CustomScrollBar({
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return RawScrollbar(
      thumbColor: AppColors.gray,
      radius: Radius.circular(8),
      thickness: 4,
      isAlwaysShown: true,
      child: child,
    );
  }
}

and the second part should be like this

child: CustomScrollBar(
              child: SingleChildScrollView(
                child: Padding(
                  padding: EdgeInsets.all(7.0.scaled),
                  child: Container(
                    width: double.infinity,
                    child: Text(
                      'any text bla bla bla \n\n\n this is a lot of \n text \n .'
                    ),
                  ),
                ),
              ),
            ),

score 1 · Answer 4 · answered Sep 10 '22 at 10:43

If you use nested scroller like this:

 Expanded(
                          flex: 2,
                          child: Center(
                            child: Scrollbar(
                              child: SingleChildScrollView(
                                primary: true,
                                child: Scrollbar(
                                  child: SingleChildScrollView(
                                    scrollDirection: Axis.horizontal,
                                   .....)

You can fix the issue adding this line to first Scrollable view:

 primary: true

The UI plotter wants know start position for the scroller both on mobile and low resolutions on desktop with size:

MediaQuery.of(context).size.shortestSide < 600

score 0 · Answer 5 · edited Jan 30 '22 at 15:33

The following assertion was thrown during a scheduler callback: The Scrollbar's ScrollController has no ScrollPosition attached

A Scrollbar cannot be painted without a ScrollPosition.

The Scrollbar attempted to use the provided ScrollController. This ScrollController should be associated with the ScrollView that the Scrollbar is being applied to. When providing your own ScrollController, ensure both the Scrollbar and the Scrollable widget use the same one.

This is flutter's bug, https://github.com/flutter/flutter/issues/82573.

It is fixed on the flutter master branch:

flutter channel master
flutter upgrade

score 0 · Answer 6 · answered Oct 11 '22 at 05:17

For this error, you have to define same 1 scrollController for both ScrollBar and SingleSchildScrollView/ListView:

For example from my prj:

  final ScrollController _scrollController = ScrollController(); //define just 1 controller
  final _currencyFormatter = NumberFormat('#,##0.00', 'vi_VN');
  final double _safeSpaceToShowToolTip = 1.4;
  final double _fixedChartHeight = 350.0;
  int _touchedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      controller: _scrollController, // and use it both here
      isAlwaysShown: true,
      trackVisibility: true,
      radius: Radius.circular(6.0),
      child: SingleChildScrollView(
        controller: _scrollController, // AND HERE
        scrollDirection: Axis.horizontal,
        physics: BouncingScrollPhysics(),
        child: Container(
          margin: EdgeInsets.only(bottom: R.dimens.mediumSpacing),
          height:
              R.dimens.getSpecificSize(_fixedChartHeight, isForHeight: true),
          width: R.dimens
              .getSpecificSize(_fixedChartHeight * 1.9, isForHeight: false),
          child: BarChart(
            _barChartData(),
          ),
        ),
      ),
    );
  }

Flutter The Scrollbar's ScrollController has no ScrollPosition attached

6 Answers6