flutter_animate_on_scroll 0.0.2 copy "flutter_animate_on_scroll: ^0.0.2" to clipboard
flutter_animate_on_scroll: ^0.0.2 copied to clipboard

Introducing Flutter animate on scroll - a powerful Flutter animation package designed specifically for animating widgets based on scroll events. Flutter animate on scroll enables you to effortlessly c [...]

Flutter_animate_on_scroll #

Enables you to create flutter animations on scroll, faster, efficient and with less code.

Features #

  • Stunning default animation
  • Customizable animation

Getting started #

Note: Make sure to use [SingleChildScrollView] and attach [context.scrollController] to your controller

Put the dependency inside your pubspec.yml and run packages get.

Usage #

Provide required [GlobaleKey] and child [Widget], you can play with animation delay, curves, duration...

import './src/components/custom_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate_on_scroll/flutter_animate_on_scroll.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: context.scrollController,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
          child: Column(
            children: [
              FadeIn(
                globalKey: GlobalKey(),
                child: const CustomInfo(name: 'Fade In'),
              ),
              const SizedBox(height: 20),
              FadeInDown(
                globalKey: GlobalKey(),
                delay: 200.ms,
                child: const CustomInfo(name: 'Fade In Down'),
              ),
              const SizedBox(height: 20),
              FadeInUp(
                globalKey: GlobalKey(),
                delay: 400.ms,
                child: const CustomInfo(name: 'Fade In Up'),
              ),
              const SizedBox(height: 20),
              FadeInLeft(
                globalKey: GlobalKey(),
                delay: 600.ms,
                child: const CustomInfo(name: 'Fade In Left'),
              ),
              const SizedBox(height: 20),
              FadeInRight(
                globalKey: GlobalKey(),
                delay: 200.ms,
                child: const CustomInfo(name: 'Fade In Right'),
              ),
              const SizedBox(height: 20),
              const Divider(),
              FadeOut(
                globalKey: GlobalKey(),
                delay: 400.ms,
                child: const CustomInfo(name: 'Fade Out'),
              ),
              const SizedBox(height: 20),
              FadeOutUp(
                globalKey: GlobalKey(),
                delay: 600.ms,
                child: const CustomInfo(name: 'Fade Out Up'),
              ),
              const SizedBox(height: 20),
              FadeOutDown(
                globalKey: GlobalKey(),
                delay: 800.ms,
                child: const CustomInfo(name: 'Fade Out Down'),
              ),
              const SizedBox(height: 20),
              FadeOutLeft(
                globalKey: GlobalKey(),
                delay: 400.ms,
                child: const CustomInfo(name: 'Fade Out Left'),
              ),
              const SizedBox(height: 20),
              FadeOutRight(
                globalKey: GlobalKey(),
                delay: 600.ms,
                child: const CustomInfo(name: 'Fade Out Right'),
              ),
              const SizedBox(height: 220),
            ],
          ),
        ),
      ),
    );
  }
}

Custom animation

import 'package:flutter/material.dart';
import 'package:flutter_animate_on_scroll/flutter_animate_on_scroll.dart';

import '../components/custom_info.dart';

class CustomAnimationExample extends StatefulWidget {
  const CustomAnimationExample({super.key});

  @override
  State<CustomAnimationExample> createState() => _CustomAnimationExampleState();
}

class _CustomAnimationExampleState extends State<CustomAnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    _animationController = AnimationController(vsync: this, duration: 600.ms);
    _animation = Tween<double>(begin: 0.3, end: 1.0).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.bounceInOut),
    );
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: context.scrollController,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
          child: Column(
            children: [
              CustomAnimated(
                animationController: _animationController,
                animation: _animation,
                globalKey: GlobalKey(),
                child: ScaleTransition(
                  scale: _animation,
                  child: const CustomInfo(name: 'Custom Animation'),
                ),
              ),
              const SizedBox(height: 20),
              const Divider(),
              const SizedBox(height: 220),
            ],
          ),
        ),
      ),
    );
  }
}

Default Animations #

Fade Animation #

Fade Animation

  • FadeIn
  • FadeInDown
  • FadeInLeft
  • FadeInRight
  • FadeInUp
  • FadeOut
  • FadeOutDown
  • FadeOutLeft
  • FadeOutRight
  • FadeOutUp

Slide Animation #

Slide Animation

  • SlideInDown
  • SlideInLeft
  • SlideInRight
  • SlideInUp
  • SlideOutDown
  • SlideOutLeft
  • SlideOutRight
  • SlideOutUp

Rotate Animation #

Rotate Animation

  • RotateIn
  • RotateInDownLeft
  • RotateInDownRight
  • RotateInUpLeft
  • RotateInUpRight
  • RotateOut
  • RotateOutDownLeft
  • RotateOutDownRight
  • RotateOutUpLeft
  • RotateOutUpRight

Zoom Animation #

  • ZoomIn
21
likes
130
pub points
71%
popularity

Publisher

unverified uploader

Introducing Flutter animate on scroll - a powerful Flutter animation package designed specifically for animating widgets based on scroll events. Flutter animate on scroll enables you to effortlessly create captivating and interactive scroll-based animations that bring your user interface to life.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_animate_on_scroll