Flutter Lecture – Animations

Begleit-App für die Vorlesung zu Flutter Animationen. Die App enthält drei Bereiche:

• Demos – Isolierte Live-Coding-Beispiele zu jedem Thema
• Exercises – Hands-on Aufgaben (leer, zum Selbst-Implementieren)
• Challenges – Komplexe Effekte nachbauen (offen, keine Vorgaben)

Setup

flutter pub get
flutter run

Projektstruktur

lib/
├── main.dart
├── app.dart                        # MaterialApp + Theme + GoRouter
├── home_screen.dart                # Startseite (Demos / Exercises / Challenges)
│
├── demos/
│   ├── 01_implicit/                # AnimatedContainer – Größe & Farbe
│   ├── 02_tween_animation_builder/ # TweenAnimationBuilder – Fortschrittsanzeige
│   ├── 03_explicit/                # AnimationController: Shake, Counter, Gradient
│   ├── 04_staggered/               # Interval + SlideTransition + FadeTransition
│   ├── 05_transitions/             # AnimatedSwitcher + Hero
│   ├── 06_custom_painter/          # Animierter Fortschrittsring
│   ├── 07_flutter_animate/         # .animate().fadeIn().slideY()
│   └── 08_lottie/                  # Lottie.asset mit AnimationController
│
├── exercises/
│   ├── 01_implicit/                # AnimatedContainer ⭐
│   ├── 02_tween/                   # TweenAnimationBuilder ⭐
│   ├── 03_explicit/                # Pulsierender Like-Button ⭐⭐
│   ├── 04_staggered/               # Versetzte Listen-Animation ⭐⭐⭐
│   ├── 05_transitions/             # Hero-Übergang ⭐⭐
│   ├── 06_custom_painter/          # Animiertes Balkendiagramm ⭐⭐⭐
│   ├── 07_flutter_animate/         # Animierter Lade-Screen ⭐⭐ 
│   ├── 08_lottie/                  # Konfetti-Animation ⭐⭐
│   └── exercises_screen.dart
│
└── challenges/
    ├── 01_duolingo/                # Satzauswahl mit Flug-Animation ⭐⭐⭐
    ├── 02_instagram_like/          # Doppel-Tap Herz-Effekt ⭐⭐⭐
    ├── 03_shader/                  # Fragment Shader von fluttershaders.com ⭐⭐⭐
    └── challenges_screen.dart

assets/
├── animations/                     # .json Lottie-Dateien (selbst hinzufügen)
└── shaders/                        # .frag Shader-Dateien (selbst hinzufügen)

STARTER vs SOLUTION

Jede Demo-Datei enthält zwei Versionen:

• 🚧 STARTER – Statischer Code ohne Animation (aktiv während Live Coding)
• ✅ SOLUTION – Vollständige Animation (auskommentiert)