GitLocker: The Coding Marketplace

Description:

web smooth scroll

Web Smooth Scroll #
A package to help you provide a smoother and aesthetic scroll feeling. The motivation behind this package is, while using the official Flutter SDK the scrolling experience on web is very jerky and feels laggy to overcome it and provide more quality scrolling this package is developed.

Motivation #
While I was developing my portfolio website using Flutter I faced the issue of jerky scrolling so for a research in solving it I came across this package https://pub.dev/packages/smooth_scroll_web, but it has got some issues and currently not being maintained by the author. It has issues while scrolling and also when using with scrollbars the scroll behaviour is different. Also when user uses a trackpad to scroll it'll scroll to the bottom of the screen and makes the website completely unusable. Also that package doesn't supports null safety which is supported in this package. I've developed this package to overcome all this issues. I would like to thank Dezső Csete, for this motivation and providing a base to work on.

Scroll without plugin #

Scroll with plugin #

Getting Started #

Installation
Basic Usage

Installation #
Add
dependencies:
web_smooth_scroll: ^latest_version
copied to clipboard
to your pubspec.yaml, and run
flutter packages get
copied to clipboard
in your project's root directory.
Basic Usage #

Import it to your project file

import 'package:web_smooth_scroll/web_smooth_scroll.dart';
copied to clipboard

Create a Scroll Controller

// Controllers
late ScrollController _scrollController;

@override
void initState() {
// initialize scroll controllers
_scrollController = ScrollController();

super.initState();
}
copied to clipboard

Use the controller with package

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Web Smooth Scroll'),
),
body: WebSmoothScroll(
controller: _scrollController,
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
controller: _scrollController,
child: _buildScrollableList(),
),
),
);
}
copied to clipboard
WebSmoothScroll can be used with any scrollable widget, just pass the same scroll controller to WebSmoothScroll as well as the scrollable widget. And also specify scroll physics to NeverScrollableScrollPhysics() #

There are additional optional parameters one can use

WebSmoothScroll(
controller: _scrollController,
scrollOffset: 60, // additional offset to users scroll input
animationDuration: 500, // duration of animation of scroll in milliseconds
curve: Curves.easeInOutCirc, // curve of the animation
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
controller: _scrollController,
child: _buildScrollableList(),
),
),
copied to clipboard
Some points to be noted #

This plugin is to be used only on web and not on any other platform, you can check if platform is web and render using WebSmoothScroll else don't use this plugin.
Remember to assign physics as NeverScrollableScrollPhysics() else you won't see any change in the scrolling behaviour