flutter_shake_animated

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

flutter_shake_animated ist ein Flutter-Paket, das animierte Schüttel-Effekte für Widgets bereitstellt und die Benutzerinteraktion durch dynamische visuelle Rückmeldungen verbessert. Es ermöglicht Entwicklern, Shaking-Animationen mit minimalem Code einfach auf UI-Elemente anzuwenden. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und ist somit vielseitig für plattformübergreifende Anwendungen geeignet. Durch einfache Integration über pub add ist es ideal, um spielerische oder auffällige Animationen für Buttons, Eingabefelder oder Warnungen hinzuzufügen.

Anwendungsfälle

Visuelle Rückmeldung zu Formularfeldern hinzufügen
Interaktive Button-Animationen erstellen
Fehler in Formularen hervorheben
Verbesserung von Spiel-UI-Elementen
Engagierende Onboarding-Bildschirme gestalten

Hauptmerkmale

Einfaches API zum Anwenden von Schüttelanimationen
Plattformübergreifende Kompatibilität
Anpassbare Schüttelintensität und -dauer
Unterstützt horizontales und vertikales Schütteln
Leichtgewichtig und einfach zu integrieren

Geeignet für

UI-Designer, die interaktive Elemente suchen
Entwickler, die formularintensive Apps erstellen
Game-Entwickler, die schnelle Animationen benötigen
Entwickler von Bildungs-Apps
Prototyping interaktiver Schnittstellen

Hinweise

Kann für auf Zugänglichkeit ausgerichtete Designs nicht geeignet sein
Übermäßiger Einsatz könnte Nutzer ablenken
Leistungseinfluss auf Geräten mit geringer Leistungsfähigkeit
Eingeschränkte Anpassungsmöglichkeiten jenseits grundlegender Schüttelparameter
Am besten sparsam verwenden, um die beste Benutzererfahrung zu gewährleisten

Original-README

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

Get started

this shake effect I refer to this css open source library, CSShake

Add dependency

dependencies:
  flutter_shake_animated: ^0.0.5

Usage

For more animate effects, please refer to example/lib/main.dart file

import 'package:flutter_shake_animated/flutter_shake_animated.dart';

ShakeWidget(
    duration: duration,
    shakeConstant: shakeConstant,
    autoPlay: true,
    enableWebMouseHover: true,
    child: your widget,
)

ShakeConstant

1. ShakeDefaultConstant1,ShakeDefaultConstant2
2. ShakeHardConstant1,ShakeHardConstant2
3. ShakeSlowConstant1,ShakeSlowConstant2
4. ShakeLittleConstant1,ShakeLittleConstant2
5. ShakeHorizontalConstant1,ShakeHorizontalConstant2
6. ShakeVerticalConstant1,ShakeVerticalConstant2
7. ShakeRotateConstant1,ShakeRotateConstant2
8. ShakeCrazyConstant1,ShakeCrazyConstant2
9. ShakeOpacityConstant
10.ShakeChunkConstant

Custom shake animation


class CustomShakeAnimated implements ShakeConstant {

  @override
  Duration get duration => throw UnimplementedError();

  @override
  /// range: 0 - 100 && incremental, last value must equal 100. 
  /// when only have oneelement,represents the same interval
  List<int> get interval => throw UnimplementedError();

  @override
  /// range: 0 - 1.0, []:1.0 = [1.0]
  List<double> get opacity => throw UnimplementedError();

  @override
  /// eg: 45deg = pi / 4, []:0 = [45]: rotate 45deg
  List<double> get rotate => throw UnimplementedError();

  @override
  // Offset(double dx, double dy)
  List<Offset> get translate => throw UnimplementedError();
  
}

Pakete, Repositories und App-Kategorien suchen