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 [
// ...
],
),
);
}
}