DEV Community

Cover image for Animation in Flutter
Aadarsh Kunwar
Aadarsh Kunwar

Posted on

Animation in Flutter

Flutter provides various ways to add animations to your app, making it more interactive and visually appealing. Here's a quick overview of how you can implement animations in Flutter:

1.
Implicit Animations
Implicit animations are the simplest to use, as Flutter handles the animation for you. These include widgets like AnimatedContainer, AnimatedOpacity, AnimatedPadding, etc. They automatically animate between values when they change.

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  double _width = 100;
  double _height = 100;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _width = _width == 100 ? 200 : 100;
          _height = _height == 100 ? 200 : 100;
        });
      },
      child: AnimatedContainer(
        width: _width,
        height: _height,
        color: Colors.blue,
        duration: Duration(seconds: 1),
        curve: Curves.easeInOut,
      ),
    );
Enter fullscreen mode Exit fullscreen mode

2.
Explicit Animations
For more control over animations, you can use explicit animations. These involve AnimationController, Animation, and various Tween classes.

class MyFadeTransition extends StatefulWidget {
  @override
  _MyFadeTransitionState createState() => _MyFadeTransitionState();
}

class _MyFadeTransitionState extends State<MyFadeTransition>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

3.
Hero Animations
Hero animations are used for transitions between two different screens. You simply wrap a widget in a Hero widget, and Flutter automatically animates the transition between screens.

// First Screen
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Screen")),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return SecondScreen();
            }));
          },
          child: Hero(
            tag: 'hero-image',
            child: Image.asset('assets/image.png'),
          ),
        ),
      ),
    );
  }
}

// Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen")),
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.asset('assets/image.png'),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

4.
Custom Animations
For more complex scenarios, you might want to create custom animations by extending the ImplicitlyAnimatedWidget or using the TweenAnimationBuilder.

class MyCustomAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      tween: ColorTween(begin: Colors.blue, end: Colors.red),
      duration: Duration(seconds: 2),
      builder: (context, Color color, child) {
        return ColorFiltered(
          colorFilter: ColorFilter.mode(color, BlendMode.modulate),
          child: Image.asset('assets/image.png'),
        );
      },
    );
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Animation Libraries You can also explore animation libraries like flutter_animator, rive, or flare_flutter for more advanced and pre-built animations.

Each of these approaches gives you the flexibility to add animations to your Flutter apps, enhancing user experience.

Top comments (0)