🧙‍♂️Animations

Animations are a crucial part of modern UI/UX design, allowing developers to create visually appealing and dynamic applications. Flutter provides a powerful and flexible framework for working with animations.

1. Basic Animation 🌀

Basic animations involve animating a single property over time. Flutter's AnimationController and Tween classes are typically used for this purpose.

AnimationController controller;
Animation<double> animation;

@override
void initState() {
  super.initState();

  controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );

  animation = Tween<double>(
    begin: 0,
    end: 300,
  ).animate(controller)
    ..addListener(() {
      setState(() {});
    });

  controller.forward();
}

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

2. Animated Widgets 🎡

Flutter provides several animated widgets for common animations, like AnimatedOpacity, AnimatedPositioned, and AnimatedContainer.

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: _isBig ? 200 : 100,
  height: _isBig ? 200 : 100,
  color: Colors.blue,
)

3. Custom Animations 🎨

For more complex animations, you can create your own custom animated widgets.

class FadeTransitionExample extends StatelessWidget {
  final Animation<double> animation;

  FadeTransitionExample(this.animation);

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animation,
      child: Container(width: 200, height: 200, color: Colors.blue),
    );
  }
}

Complete Example Code 📜

Here's a complete Flutter app example demonstrating a basic animation using AnimationController and Tween:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BasicAnimationExample(),
    );
  }
}

class BasicAnimationExample extends StatefulWidget {
  @override
  State<BasicAnimationExample> createState() => _BasicAnimationExampleState();
}

class _BasicAnimationExampleState extends State<BasicAnimationExample>
    with TickerProviderStateMixin {
  AnimationController? controller;
  Animation<double>? animation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    animation = Tween<double>(
      begin: 0,
      end: 300,
    ).animate(controller!)
      ..addListener(() {
        setState(() {});
      });

    controller!.forward();
  }

  @override
  void dispose() {
    controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Animation Example'),
      ),
      body: Center(
        child: Container(
          width: animation!.value,
          height: animation!.value,
          color: Colors.blue,
        ),
      ),
    );
  }
}

In this example:

  • We first create an AnimationController and a Tween object.

  • The Tween object specifies the beginning and ending values for the animation.

  • We start the animation by calling controller.forward().

  • We use the addListener method to rebuild our widget each time the animation value changes.

  • In the build method, we create a Container whose width and height are set to the current value of the animation, creating a growing square animation.

Assignments 📝

Last updated

Was this helpful?