Paketdetailsv0.3.0

flutter_animate_on_scroll

Flutter-Paket zum Animieren von Widgets basierend auf Scrollereignissen. Erstellen Sie mühelos fesselnde, interaktive Scroll-basierte Animationen, um Ihre Benutzeroberfläche zu verbessern.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 106
Likes: 48
Pub-Punkte: 160

Paket installieren

flutter pub add flutter_animate_on_scroll

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das reibungslose, scrollgesteuerte Animationen für Widgets ermöglicht. Es erlaubt Entwicklern, dynamische und interaktive Benutzeroberflächen zu erstellen, indem Animationen auf Scrollereignisse reagieren. Ideal zur Verbesserung der visuellen Interaktion in Listen, Karten und scrollbaren Layouts. Das Paket lässt sich nahtlos in bestehende Flutter-Projekte integrieren und unterstützt mehrere Plattformen, wodurch es vielseitig für plattformübergreifende Anwendungen ist.

Anwendungsfälle

Scrollausgelöste Eingangsanimationen
Interaktive Effekte für Listenitems
Parallax-Scrolling-Visuals
Dynamische Kopfzeilenübergänge
Verbesserung der Benutzerengagement bei langen Scrollseiten

Hauptmerkmale

Echtzeit-Erkennung von Scrollereignissen
Einfache Animationskonfiguration
Plattformübergreifende Kompatibilität
Unterstützt verschiedene Animationsarten
Leichtgewichtig und einfach zu integrieren

Geeignet für

UI-Designer, die interaktive Elemente suchen
Entwickler, die scrollintensive Schnittstellen erstellen
Apps mit langen Inhaltlisten oder Feeds
Projekte, die subtile Bewegungsfeedback erfordern
Plattformübergreifende mobile und Web-Anwendungen

Hinweise

Kann die Leistung bei großen Listen beeinträchtigen
Erfordert sorgfältige Abstimmung für Glätte
Beschränkt auf Scroll-basierte Auslöser
Nicht ideal für komplexe Gesteninteraktionen
Am besten mit optimierten Widget-Bäumen verwendet

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

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

Usage

Provide required 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(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
          child: Column(
            children: [
              FadeIn(
                config: BaseAnimationConfig(
                  child: const CustomInfo(name: 'Fade In')
                ),
              ),
              const SizedBox(height: 20),
              FadeInDown(
                config: BaseAnimationConfig(
                  delay: 200.ms,
                  child: const CustomInfo(name: 'Fade In Down'),
                ),
              ),
              const SizedBox(height: 20),
              FadeInUp(
                config: BaseAnimationConfig(
                  delay: 400.ms,
                  child: const CustomInfo(name: 'Fade In Up'),
                ),
              ),
              const SizedBox(height: 20),
              FadeInLeft(
                config: BaseAnimationConfig(
                  delay: 600.ms,
                  child: const CustomInfo(name: 'Fade In Left'),
                ),
              ),
              const SizedBox(height: 20),
              FadeInRight(
                config: BaseAnimationConfig(
                  delay: 200.ms,
                  child: const CustomInfo(name: 'Fade In Right'),
                ),
              ),
              const SizedBox(height: 20),
              const Divider(),
              FadeOut(
                config: BaseAnimationConfig(
                  delay: 400.ms,
                  child: const CustomInfo(name: 'Fade Out'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutUp(
                config: BaseAnimationConfig(
                  delay: 600.ms,
                  child: const CustomInfo(name: 'Fade Out Up'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutDown(
                config: BaseAnimationConfig(
                  delay: 800.ms,
                  child: const CustomInfo(name: 'Fade Out Down'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutLeft(
                config: BaseAnimationConfig(
                  delay: 400.ms,
                  child: const CustomInfo(name: 'Fade Out Left'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutRight(
                config: BaseAnimationConfig(
                  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, AutomaticKeepAliveClientMixin{
  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(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
          child: Column(
            children: [
              CustomAnimated(
                animationController: _animationController,
                animation: _animation,
                child: ScaleTransition(
                  scale: _animation,
                  child: const CustomInfo(name: 'Custom Animation'),
                ),
              ),
              const SizedBox(height: 20),
              const Divider(),
              const SizedBox(height: 220),
            ],
          ),
        ),
      ),
    );
  }
}