reveal_on_scroll

Description:

reveal on scroll

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>
copied to clipboard
In your library add the following import:
import 'package:reveal_on_scroll/reveal_on_scroll.dart';
copied to clipboard
 
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(),
);
copied to clipboard

There are three ways of implementing the scroll behavior #


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,
),
)
copied to clipboard

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();
},
)
copied to clipboard
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(),
)
copied to clipboard
 
Options #
NameUsechildA widget that would display when the scroll reaches the elements viewportlabelThis is a tag for our GlonalObjectKeyscrollControllerit allows us to know the current location the scrolling has reachedreflectPositionReflectPosition helps us to push the widget position below or aboveanimationTypeWhen you use the default builder, you would have to state which animation type you want to useonReachedMonitors either the scroll bar have set on the viewport of the current widgetswidgetBuilder;This is a builder that allows you to build your own widgetstartOnScrollAllow 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 #