reveal_on_scroll 0.0.3

A Flutter library for easily animating widget as they enter/leave the viewport.

Reveal on Scroll

RevealonScroll is a Flutter library for easily animating widgets as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully, you’ll be surprised below at how easy it is to pick up.Generally, you can use it to animate widgets or display/hide any widgets based on the current scroll position

 

 

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  reveal_on_scroll: <latest_version>

In your library add the following import:

import 'package:reveal_on_scroll/reveal_on_scroll.dart';

 

Creating a reveal on the scroll

The below implementation allows you to perform animation on each FlexCard by using our default Animations

// _controller to manage the position of each widget
final ScrollController _controller = ScrollController();

ScrollToReveal.withAnimation(
    label: 'Scroll$index',
    scrollController: _controller,
    reflectPosition: -100,
    animationType: AnimationType.findInLeft,
    child: const FlexCard(),
);

There are three ways of implementing the scroll behavior

1. Passing a widget to the library (this option comes with ValueChanged an argument that returns a boolean when you reach the expected position)

ScrollToReveal(
   label: 'withChild',
   scrollController: _controller,
   onReached: (value) {

 },
   child: Container(
      height: 500,
      color: Colors.red,
  ),
)

2. Working with ScrollToReveal.builder .This has a boolean which returns true when the current position has reached

ScrollToReveal(
   label: 'header',
   scrollController: _controller,
   onReached: (value) {

   },
   widgetBuilder: (show) {
      return Container();
   },
)

3. Working with ScrollToReveal.withAnimation. This comes with a default animation implemented with animate_do (A package that allows you to perform a quick animation).

ScrollToReveal.withAnimation(
   label: 'Scroll$index',
   scrollController: _controller,
   reflectPosition: -100,
   animationType: AnimationType.findInLeft,
   child: const FlexCard(),
)

 

Options

Name	Use
child	A widget that would display when the scroll reaches the elements viewport
label	This is a tag for our GlonalObjectKey
scrollController	it allows us to know the current location the scrolling has reached
reflectPosition	ReflectPosition helps us to push the widget position below or above
animationType	When you use the default builder, you would have to state which animation type you want to use
onReached	Monitors either the scroll bar have set on the viewport of the current widgets
widgetBuilder;	This is a builder that allows you to build your own widget
startOnScroll	Allow to specify either the reveal to start while scroll or not

 

Known Issues 💔

No known issues so far.

 

Contributing

• Fix a bug
• Write and improve some documentation. Documentation is very critical to us. We would appreciate help in adding multiple languages to our docs.
• If you are a developer, feel free to check out the source and submit pull requests.
• Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
• Please don't forget to like, follow, and star our repo!

Show some ❤️ and star the repo