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.

@overrideWidgetbuild(BuildContext context) {
returnFadingScroll(
builder: (context, controller) {
returnListView(
controller: controller,
children: [
// ...
],
),
},
);
}

Usage

Customize fading size and scroll threshold

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

@overrideWidgetbuild(BuildContext context) {
returnFadingScroll(
fadingSize:100,
scrollExtent:120,
builder: (context, controller) {
returnListView(
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_extendsState<Example> {
latefinal pageController =PageController();
@overridevoiddispose() {
pageController.dispose();
super.dispose();
}
@overrideWidgetbuild(BuildContext context) {
returnFadingScroll(
controller: pageController,
builder: (context, controller) {
returnPageView(
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!