Introduction

This is a simple wrapper for the RawScrollbar widget that allows you to customize the scrollbar's appearance.

Scrollbar Widget

./lib/widgets/scroll_bar_widget.dart
import 'package:flutter/material.dart';
 
class ScrollBarWidget extends StatelessWidget {
  final ScrollController controller;
  final Widget child;
 
  const ScrollBarWidget({Key? key, required this.controller, required this.child}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return RawScrollbar(
      controller: controller,
      radius: const Radius.circular(10.0),
      thumbColor: Theme.of(context).primaryColor,
      child: child,
    );
  }
}

Usage

./lib/screens/home.dart
import 'package:flutter/material.dart';
import '../widgets/scroll_bar_widget.dart';
 
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
 
  @override
  State<Home> createState() => _HomeState();
}
 
class _HomeState extends State<Home> {
  late ScrollController _scrollController;
 
  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }
 
  @override
  Widget build(BuildContext context) {
    return ScrollBarWidget(
      controller: _scrollController,
      child: ListView(
        controller: _scrollController,
        children: const [
          // ...
        ],
      ),
    );
  }
}