Add a fading effect when the user can scroll.

Demo

Quickstart

Add the dependency to fading_scroll to your pubspec.yaml file.

flutter pub add clickup_fading_scroll

Wrap your scrollable content in a FadingScroll widget and give the provided ScrollController to your scrollable widget.

@override
Widget build(BuildContext context) {
    return FadingScroll(
        builder: (context, controller) {
            return ListView(
                controller: controller,
                children: [
                    // ...
                ],
            ),
        },
    );
}

Usage

Customize fading size and scroll threshold

You can customise the effect by providing custom scroll extents and fading sizes.

@override
Widget build(BuildContext context) {
    return FadingScroll(
        fadingSize: 100,
        scrollExtent: 120,
        builder: (context, controller) {
            return ListView(
                controller: controller,
                children: [
                    // ...
                ],
            ),
        },
    );
}

Using a different controller

You can also provide your own ScrollController to the FadingScroll. This may be useful for controller subclasses like the PageController.

class _State_ extends State<Example> {
  late final pageController = PageController();

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadingScroll(
      controller: pageController,
      builder: (context, controller) {
        return PageView(
          controller: pageController,
          children: [
              // ...
          ],
        );
      },
    );
  }
}

About

This package has been developped by the ClickUp mobile team for it is own needs, but feel free to participate by filing issues or submit pull-requests.

Open Sourced by ClickUp 💙

Saving people time by making the world more productive.

We're looking for experienced developers.

Be Part of Something Great and Join Us!