webscrollbar

Description:

webscrollbar

WebScrollBar #
A simple package, that creates a scrollbar for Flutter Web
About me #
You can find out everything about the creation of this package, how it works by opening this link.
https://hobbister.com/2020/11/24/flutter-web-scrollbar-with-generic-desktop-feel/
It would be very appriciated.
Getting started #
The package should only be used for Flutter Web and on the desktop version of the site, there are better suited mobile scrollbars, than this package.
You can use the package with any Scrollable widget, but you have to set its physics to NeverScrollableScrollPhysics(), because it is the only way to deactivate the default scrolling and we need complete control over the scrolling.
You can use it on dynamically sized widgets also, but it is a possibility to control the height of the scrollbar window. Both examples can be found in the Examples section
This package depends on my other package, which is the smooth_scroll_web package. The scrollbar would not work without it.
Moving the scrollbar #

Resizing the widget #

Examples #
class ScrollbarExample extends StatelessWidget {
ScrollController controller = ScrollController();
@override
Widget build(BuildContext context) {
///DYNAMIC SIZE EXAMPLE
return Container(
color: Colors.red,
child: WebScrollBar(
child: _getChild(),
controller: controller,
visibleHeight: MediaQuery.of(context).size.height,
),
);

///FIXED HEIGHT EXAMPLE
return Column(
children: [
Container(
height: 500,
color: Colors.red,
child: SmoothScrollWeb(
controller: controller,
child: ScrollBar(
child: _getChild(),
controller: controller,
visibleHeight: 500,
),
),
),
],
);
}

Widget _getChild() {
return Container(
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
controller: controller,
child: Column(
children: [
for (int i = 0; i < 200; i++)
Container(
height: 10,
color: RandomColor.generate(),
),
],
),
),
);
}
}
copied to clipboard