webscrollbar 0.0.2
webscrollbar: ^0.0.2 copied to clipboard

A scrollbar that is designed for the desktop version of web. It creates a general scrollbar, for the desktop version of your website.

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 #

Movement

Resizing the widget #

Resizing

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

17
likes
90
pub points
57%
popularity

A scrollbar that is designed for the desktop version of web. It creates a general scrollbar, for the desktop version of your website.

Repository (GitLab)
View/report issues

Documentation

API reference

License

unknown (LICENSE)

Dependencies

flutter, smooth_scroll_web

More

Packages that depend on webscrollbar