flutter_scroll_animation

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.

Features

• 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.

Getting Started

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

Usage

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'),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Customization

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')),
  ),
)

Advanced Customization

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.
• onAnimationStart and onAnimationEnd: 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'),
)

Additional Information

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.