Enhance Web Scroll Experience with Web Smooth Scroll

Web Smooth Scroll is a revolutionary plugin designed to elevate the scrolling experience on web applications built with Flutter. By addressing the inherent jerkiness of the native Flutter scrolling mechanism, this package provides a smooth and aesthetically pleasing navigation.

Inspiration

The motivation behind Web Smooth Scroll stemmed from the inadequacy of the official Flutter SDK's scrolling behavior on the web, which often resulted in jerky and sluggish motion. To address this limitation and deliver a superior scrolling experience, Web Smooth Scroll was meticulously crafted.

Before and After

The impact of Web Smooth Scroll is immediately evident. Before integrating the plugin, scrolling is characterized by abrupt jumps and a lack of fluidity. However, after incorporating the plugin, scrolling becomes seamless and gracefully transitions between page elements.

Getting Started

Installation:

Add the Web Smooth Scroll dependency to your project's pubspec.yaml file:

dependencies:
  web_smooth_scroll: ^latest_version

Basic Usage:

1. Import the plugin:

import 'package:web_smooth_scroll/web_smooth_scroll.dart';

2. Create a Scroll Controller:

late ScrollController _scrollController;

@override
void initState() {
  _scrollController = ScrollController();
  super.initState();
}

3. Use the controller with Web Smooth Scroll:

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

Additional Features

Web Smooth Scroll supports optional parameters for customization:

WebSmoothScroll(
  controller: _scrollController,
  scrollOffset: 60, // Offset from user's scroll input
  animationDuration: 500, // Duration of scrolling animation
  curve: Curves.easeInOutCirc, // Animation curve
  child: SingleChildScrollView(
    physics: const NeverScrollableScrollPhysics(),
    controller: _scrollController,
    child: _buildScrollableList(),
  ),
);

Points to Note:

1. Ensure the plugin is used only for web applications.
2. Set the physics property to NeverScrollableScrollPhysics() to experience the enhanced scrolling behavior.