RANIARANIA Academy

Animations & Advanced UI

Learn to craft delightful, smooth UX in Flutter by moving from implicit animations through explicit controllers, Tweens and curves, Hero transitions, custom painting and slivers. You will finish able to add purposeful, 60fps motion and advanced scroll effects to any screen, and to reach for the right animation tool for each job.

Watch the free preview

AnimatedContainer and the implicit animation model — free to watch, no account needed.

Mobile Development (Flutter) INTERMEDIATE · 150 min · Certificate on completion · 3 CPD points

What you'll learn

  • Craft delightful, smooth UX with purposeful Flutter animations and advanced UI
  • Animate layout, colour and size declaratively with AnimatedContainer and other implicit widgets
  • Drive explicit animations with AnimationController, Tween and Curves for full control
  • Build shared-element motion with Hero and custom page route transitions
  • Draw and animate custom visuals with CustomPainter and create rich scroll effects with slivers

Syllabus

Implicit Animations — Motion for Free
AnimatedContainer and the implicit animation modelFree preview15 min
The implicit family — opacity, switching and TweenAnimationBuilder15 min
Explicit Animations & Controllers
AnimationController, tickers and the vsync15 min
Tween, curves and AnimatedBuilder15 min
Motion Between Screens & Custom Drawing
Hero transitions and shared-element motion15 min
Custom painting with CustomPainter15 min
Advanced Scroll Effects with Slivers
Slivers and CustomScrollView fundamentals15 min
Custom scroll effects and animation polish15 min
Lab — 10 Exercises & Solutions
Exercises 1–515 min
Exercises 6–1015 min