Add a fading effect when the user can scroll.

Overview

Logo Logo

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

Logo Logo

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 💙

ClickUp ClickUp

Saving people time by making the world more productive.

We're looking for experienced developers.

Be Part of Something Great and Join Us!

You might also like...

Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Dec 15, 2022

Academic master is E-learning app where students can share their doubts wiith their peers they can chat and also they can find their notes

Academic master is E-learning app where students can share their doubts wiith their peers they can chat and also they can find their notes

Academic Master is E-learning App. Features:- 1) You can post real Post query in Images and video formates. 2) We will Provide notes,books and previou

Dec 14, 2022

One Page Scroll package for Flutter Web

OPscroll_web OPScroll A simple and easy to use library that creates OnePage sites for Flutter Web Developers! Make a beautiful and smooth landing page

Dec 17, 2022

Code for the "That's how we scroll in Flutter" workshop

flutter_custom_scroll A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Nov 11, 2022

This package allows you to scroll/select the value directly from the dropdown with less effort and time.

Direct Select This package allows you to scroll/select the value directly from the dropdown with less effort and time. Inspired by Virgil Pana shot Sa

Nov 25, 2022

Anchor scroll view - A ScrollController which supports anchor for flutter

Anchor scroll view - A ScrollController which supports anchor for flutter

flutter anchor_scroll_controller This package implement a ScrollController which

Sep 29, 2022

Flutter Tutorial - Scroll To Top In ListView

Flutter Tutorial - Scroll To Top In ListView

Flutter Tutorial - Scroll To Top In ListView Let's use Flutter to scroll to the top of a ListView and to detect the current ListView Scroll Position.

Apr 20, 2022

🌈 Repository for a compass project, basically an App for displaying bank transfers, with API requests, Flag persistence, Infinite Scroll, Error Handling, Unit Tests, Extract Sharing working with SOLID, BLoC and Designer Patterns.

🌈 Repository for a compass project, basically an App for displaying bank transfers, with API requests, Flag persistence, Infinite Scroll, Error Handling, Unit Tests, Extract Sharing working with SOLID, BLoC and Designer Patterns.

💸 Green Bank Aplicação desenvolvida em Flutter com intuito de trabalhar conexão com API, Gerenciamento de estado usando BLoC, Refatoração, Arquitetur

Oct 7, 2022

Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Flutter Tutorial - User Profile & SharedPreferences Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's inf

Dec 3, 2022
Owner
ClickUp
ClickUp
A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.

extended_tabs Language: English | 中文简体 A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs whe

FlutterCandies 185 Dec 13, 2022
Fancy list loading effect or The Shimmer Effect in Flutter

Shimmer Effect in Shimmer Effect is really cool placeholder effect that you can show when you are loading data in the form of a list. To do it in flut

Ronak Punase 31 Oct 18, 2022
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Favour Olukayode 1 Apr 28, 2022
Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort.

flutter_image_add_drag_sort Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort, support video fi

null 5 Jun 23, 2020
A package provides an easy way to add shimmer effect in Flutter project

flutter_shimmer_widget A package provides an easy way to add shimmer effect in Flutter project Getting Started Animation Example Project There is a ex

Le Anh Tuan 4 Jun 29, 2022
Flutter Bidirectional ListView - ListView with items that can be scrolled in both directions with a fixed item count and scroll boundaries.

Flutter Bidirectional ListView ListView with items that can be scrolled and lazy loaded in up and down direction with a fixed item count and scroll bo

Christoph Rothermel 7 May 30, 2022
FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

scroll_navigation My other APIs Video Viewer Video Editor Helpers Features Fancy animations. Customizable colors. Works with the back button. Scrollin

Luis Felipe Murguia Ramos 14 Jun 14, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Johannes Milke 46 Dec 6, 2022