flutter_scroll_animation is a Flutter package that provides scroll-driven animations. Widgets become visible and animate into view as they enter the viewport, allowing for smooth and dynamic UI transitions.
- Detect when widgets come into view and animate them with customizable sliding and fading effects.
- New features include scaling, rotation, and looping animations.
- Custom visibility thresholds for triggering animations at specified points.
- Optional delay for staggered animations.
- Highly flexible and easy to integrate into any Flutter app.
- Customizable animation duration, direction, curves, and behavior on exit.
To use this package, add flutter_scroll_animation to your pubspec.yaml file.
dependencies: flutter_scroll_animation: ^0.0.1
Then, run:
flutter pub get
Here is an example of how to use the ScrollAnimationWidget in your app:
import 'package:flutter/material.dart'; import 'package:flutter_scroll_animation/flutter_scroll_animation.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Scroll Animation Example', theme: ThemeData(primarySwatch: Colors.blue), home: const ExampleScreen(), ); } } class ExampleScreen extends StatelessWidget { const ExampleScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Scroll Animation Example')), body: ListView.builder( itemCount: 20, itemBuilder: (context, index) { return Padding( padding: const EdgeInsets.all(16.0), child: ScrollAnimationWidget( index: 'item_$index', alignment: index.isEven ? Alignment.centerRight : Alignment.centerLeft, child: Card( child: ListTile( title: Text('Item $index'), ), ), ), ); }, ), ); } }
You can customize the duration and the curve of the animation by passing them as parameters to ScrollAnimationWidget. Here’s an example:
ScrollAnimationWidget( index: 'item_1', alignment: Alignment.centerLeft, duration: Duration(milliseconds: 700), curve: Curves.easeInOut, child: YourWidget(), )
You can now enable scaling and rotation animations by setting the enableScale and enableRotation properties.
ScrollAnimationWidget( index: 'scale_icon', alignment: Alignment.center, enableScale: true, // Enable scale animation enableRotation: true, // Enable rotation animation duration: Duration(milliseconds: 800), child: Icon(Icons.star, size: 50, color: Colors.amber), )
You can loop animations continuously by setting the loopAnimation property, and alternate the looping direction by setting alternate.
ScrollAnimationWidget( index: 'looping_text', alignment: Alignment.centerLeft, loopAnimation: true, // Loop animation continuously alternate: true, // Alternate between forward and reverse duration: Duration(seconds: 2), child: Text('Looping Animation'), )
Stagger animations by specifying a delay before the animation starts.
ScrollAnimationWidget( index: 'delayed_button', alignment: Alignment.centerLeft, delay: Duration(milliseconds: 500), // Delay animation by 500ms child: ElevatedButton( onPressed: () {}, child: Text('Delayed Animation'), ), )
You can customize the percentage of visibility needed to trigger the animation using visibilityThreshold.
ScrollAnimationWidget( index: 'custom_visibility', alignment: Alignment.centerLeft, visibilityThreshold: 0.5, // Trigger animation when 50% visible duration: Duration(milliseconds: 600), child: Container( width: 150, height: 150, color: Colors.blue, child: Center(child: Text('50% Visible')), ), )
The package provides many additional customization options:
reverseOnExit: Reverse the animation when the widget exits the viewport.resetOnScroll: Reset the animation when the widget is scrolled out of view.onAnimationStartandonAnimationEnd: Optional callbacks to handle events when the animation starts and ends.
Example of using advanced options:
ScrollAnimationWidget( index: 'advanced_example', alignment: Alignment.center, reverseOnExit: true, enableFade: true, resetOnScroll: true, onAnimationStart: () => print('Animation started!'), onAnimationEnd: () => print('Animation ended!'), child: Text('Advanced Scroll Animation'), )
For more examples, see the example folder in the repository. If you encounter any issues, have feature requests, or want to contribute, feel free to open an issue or submit a pull request on GitHub.
- Visit the GitHub repository for more details, support, and contributions.
- File an issue if you encounter bugs or have suggestions.
- Contributions are welcome! Please read the contribution guidelines before submitting pull requests.