Flutter中如何给Scrollbar滚动条设置渐变颜色？

官方默认Scrollbar组件仅支持纯色滑块配置，ScrollBarThemeData的thumbColor属性仅接收Color类型参数，不支持直接传入渐变，因此你之前的配置无法生效。下面给出两种无额外依赖的实现方案：

方案1：自定义RawScrollbar（推荐，无额外依赖） #

RawScrollbar开放了thumbBuilder回调，可完全自定义滑块样式，直接在回调中返回带渐变效果的组件即可实现需求，示例代码如下：

import 'package:flutter/material.dart';

class GradientScrollbar extends StatelessWidget {
  final Widget child;
  final ScrollController controller;
  // 自定义渐变配色
  final Gradient thumbGradient = const LinearGradient(
    colors: [Colors.blueAccent, Colors.purpleAccent],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  );

  const GradientScrollbar({
    super.key,
    required this.child,
    required this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return RawScrollbar(
      controller: controller,
      thumbVisibility: true, // 设为true则滚动条常显示，false为滚动时才显示
      thickness: 8, // 滚动条宽度
      radius: const Radius.circular(4), // 滚动条圆角
      thumbBuilder: (context, thumbInfo) {
        return Container(
          decoration: BoxDecoration(
            gradient: thumbGradient,
            borderRadius: BorderRadius.circular(4),
          ),
          width: 8,
          height: thumbInfo.thumbExtent, // 调用系统计算好的滑块高度
          margin: EdgeInsets.only(top: thumbInfo.thumbOffset), // 调用系统计算好的滑块偏移量
        );
      },
      child: child,
    );
  }
}

// 调用示例
class UseExample extends StatelessWidget {
  UseExample({super.key});
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return GradientScrollbar(
      controller: _scrollController,
      child: ListView.builder(
        controller: _scrollController,
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(title: Text("列表项$index")),
      ),
    );
  }
}

注意事项： #

• 滚动视图的controller必须和RawScrollbar的controller为同一个实例，否则滚动条无法跟随滚动联动
• 如果是水平滚动条，只需调整渐变的方向（改为leftCenter到rightCenter），同时对应调整Container的宽高参数即可

方案2：使用支持渐变配置的第三方滚动条组件 #

如果你的项目已经引入了第三方UI组件库，部分成熟的UI库已经封装了支持渐变的滚动条组件，直接传入渐变参数即可使用，无需自定义绘制逻辑。

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