Child Scrollbar affects parent scrollbar?

Issue

I have Scrollbar at a high level and child scrollbar a few levels down the tree. When scrolling the child, the parent scrolls too. Just the scrollbar shows and moves in the parent. This does not happen the other way around. I’ve tried wrapping the child in a gesture detector, that didn’t work. BTW this is Web

This is the parent layout widget(child is where the children will render):

Scrollbar(
    controller: layoutScrollController,
    child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          if(title != null) Container(
            height: 67,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                color:Theme.of(context).brightness == Brightness.dark ? GatheredThemeColors.light[850] : Colors.white,
                border: Border(
                    bottom: BorderSide(
                        color: Theme.of(context).brightness == Brightness.dark ? GatheredThemeColors.light[800] : GatheredThemeColors.light[200],
                        width: 1
                    )
                )
            ),
            padding: EdgeInsets.all(20),
            child: Text(title,style: Theme.of(context).textTheme.headline1,),
          ),
          Container(
            padding: EdgeInsets.all(20),
            constraints: BoxConstraints(minHeight: 200),
            child: child,
          ),
        ],
      ),
    ),
  );
}

In the below image the “Reports” area is the child that is causing the parent to scroll. Look for ReportList. Report list is a ListView widget.

Solution

This is a work around, I can’t find the reference, but it looks like the flutter team looks to fix this.

Here it is. Wrap your scrollbar like this:

NotificationListener<ScrollNotification>(
    onNotification: (notification) => true,
    child: Scrollbar()
)

Answered By – Jason Spick

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)