Flutter Animations Intro

🎬 What are Flutter Animations?

Flutter animations bring your app to life with smooth transitions and motion. They enhance user experience by providing visual feedback and making interfaces feel responsive and engaging through implicit and explicit animation techniques.


// Simple animation example
AnimatedContainer(
  duration: Duration(seconds: 1),
  color: Colors.blue,
  width: 100,
  height: 100,
)

Key Animation Concepts

⚡

Implicit Animations

Easy animations with built-in widgets

AnimatedOpacity(
  opacity: 0.5,
  duration: Duration(seconds: 1),
)

🎯

Explicit Animations

Full control with AnimationController

AnimationController(
  duration: Duration(seconds: 2),
  vsync: this,
)

🦸

Hero Animations

Smooth transitions between screens

Hero(
  tag: 'imageHero',
  child: Image.asset('image.png'),
)

🎨

Custom Animations

Create unique motion effects

Tween(
  begin: 0.0,
  end: 1.0,
)

🔹 Animation Types in Flutter

Flutter provides different animation approaches:

// Implicit Animation - Automatic
AnimatedContainer(
  duration: Duration(milliseconds: 500),
  width: isExpanded ? 200 : 100,
  height: isExpanded ? 200 : 100,
  color: isExpanded ? Colors.blue : Colors.red,
  child: Center(child: Text('Tap me')),
)

// Explicit Animation - Manual control
class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State 
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
  }
}

🔹 Basic Animation Example

A simple animated button that grows on tap:

class AnimatedButton extends StatefulWidget {
  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State {
  bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isPressed = !isPressed;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        width: isPressed ? 200 : 150,
        height: isPressed ? 60 : 50,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Text(
            'Click Me',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

🔹 Animation Curves

Control the speed and feel of animations:

// Different curve types
AnimatedContainer(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,  // Smooth start and end
  // Other curves:
  // Curves.bounceIn - Bouncing effect
  // Curves.elasticOut - Elastic effect
  // Curves.linear - Constant speed
  width: 200,
  height: 200,
)

Common Animation Curves:

Curves.linear: Constant speed throughout
Curves.easeIn: Starts slow, ends fast
Curves.easeOut: Starts fast, ends slow
Curves.bounceIn: Bouncing effect at start
Curves.elasticOut: Spring-like effect

🔹 When to Use Animations

Best practices for Flutter animations:

Use Animations For:

User Feedback: Show button presses and interactions
State Changes: Visualize loading, success, or error states
Navigation: Smooth transitions between screens
Attention: Draw focus to important elements
Delight: Add personality to your app

Avoid Animations When:

They slow down user tasks
They distract from content
They cause performance issues
They're overused throughout the app