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 #
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
