Flutter使用Scrollbar提示ScrollController无绑定ScrollPosition如何解决

错误原因 #

The Scrollbar's ScrollController has no ScrollPosition attached.
这个报错的触发逻辑有两个：

• 时序冲突：RawScrollbar开启isAlwaysShown: true后，会在自身初始化阶段就尝试读取关联ScrollController的滚动位置，但此时子节点SingleChildScrollView还未完成挂载，还没有将自身的ScrollPosition绑定到共用的ScrollController上，读取失败触发报错。
• 内容高度不足：如果SingleChildScrollView的内容高度小于父容器的可用高度，它默认不会开启滚动能力，也就不会给ScrollController绑定ScrollPosition，同样会触发该报错。

解决方法 #

方案1：删除显式传入的ScrollController（推荐） #

RawScrollbar默认会自动查找子树中最近的Scrollable组件关联的控制器，不需要你显式传入共用的ScrollController，可以规避时序冲突问题，修改代码如下：
自定义CustomScrollBar调整：

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

调用代码调整：

child: CustomScrollBar(
  child: SingleChildScrollView(
    // 这里如果你的业务逻辑需要用到controller可以保留，不需要额外传给CustomScrollBar
    controller: _scrollControllerForScrollBar,
    // 强制开启滚动能力，解决内容不足导致的无ScrollPosition问题
    physics: const AlwaysScrollableScrollPhysics(),
    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 .'
        ),
      ),
    ),
  ),
)

方案2：替换废弃属性适配高版本Flutter #

如果你使用的是Flutter 2.3及以上版本，isAlwaysShown已经被废弃，替换为thumbVisibility: true即可，该属性内部已经处理了控制器绑定的时序问题，即使显式传入controller也不会触发报错。
修改CustomScrollBar中RawScrollbar的配置即可：

return RawScrollbar(
  thumbColor: AppColors.gray,
  radius: Radius.circular(8),
  thickness: 4,
  // 替换isAlwaysShown为thumbVisibility
  thumbVisibility: true,
  controller: scrollController,
  child: child,
);

内容的提问来源于stack exchange，提问作者Chris