The Project | About Us | Contribute | Donations | License

HOME

Animations are a crucial part of modern mobile applications, providing a smooth and engaging user experience. Flutter offers a rich set of tools and libraries to create various types of animations. In this section, we will cover the basics of animations in Flutter, including how to create simple animations, use built-in animation widgets, and manage complex animations.

Key Concepts

Animation: A value that changes over time.
AnimationController: Manages the animation and controls its duration, playback, and state.
Tween: Defines the range of values an animation can have.
CurvedAnimation: Adds a non-linear curve to an animation for more natural motion.
AnimatedBuilder: A widget that rebuilds its child whenever the animation changes.

Basic Animation Example

Let's start with a simple example where we animate the size of a container.

Step-by-Step Guide

Set Up the AnimationController:
- The AnimationController is responsible for managing the animation's duration and state.
Define a Tween:
- A Tween specifies the range of values for the animation.
Use an AnimatedBuilder:
- The AnimatedBuilder widget rebuilds its child whenever the animation's value changes.

Code Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Animation Example')),
        body: Center(child: AnimatedContainerExample()),
      ),
    );
  }
}

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 50, end: 200).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        );
      },
    );
  }
}

Explanation

AnimationController: Manages the animation's duration and state.

_controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
)..repeat(reverse: true);

Tween: Defines the range of values for the animation.

_animation = Tween<double>(begin: 50, end: 200).animate(_controller);

AnimatedBuilder: Rebuilds its child whenever the animation's value changes.

return AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  },
);

Using Built-in Animation Widgets

Flutter provides several built-in widgets to simplify common animations:

AnimatedContainer: Automatically animates changes to its properties.
AnimatedOpacity: Animates the opacity of a widget.
AnimatedPositioned: Animates the position of a widget within a Stack.

Example: AnimatedOpacity

class AnimatedOpacityExample extends StatefulWidget {
  @override
  _AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  double _opacity = 1.0;

  void _changeOpacity() {
    setState(() {
      _opacity = _opacity == 1.0 ? 0.0 : 1.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedOpacity(
          opacity: _opacity,
          duration: Duration(seconds: 2),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _changeOpacity,
          child: Text('Animate Opacity'),
        ),
      ],
    );
  }
}

Explanation

AnimatedOpacity: Animates the opacity of a widget over a specified duration.

AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(seconds: 2),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
);

Practical Exercise

Task

Create an animation where a square changes its color from red to blue over 3 seconds and then reverses back to red.

Solution

class ColorAnimationExample extends StatefulWidget {
  @override
  _ColorAnimationExampleState createState() => _ColorAnimationExampleState();
}

class _ColorAnimationExampleState extends State<ColorAnimationExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _colorAnimation,
      builder: (context, child) {
        return Container(
          width: 100,
          height: 100,
          color: _colorAnimation.value,
        );
      },
    );
  }
}

Explanation

ColorTween: Defines the range of colors for the animation.

_colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);

Summary

In this section, we covered the basics of animations in Flutter, including how to create simple animations using AnimationController, Tween, and AnimatedBuilder. We also explored built-in animation widgets like AnimatedContainer and AnimatedOpacity. Finally, we provided a practical exercise to reinforce the learned concepts.

In the next section, we will delve into more advanced animation techniques and explore how to create complex animations using Flutter's animation framework.

Animations in Flutter

Key Concepts

Basic Animation Example

Step-by-Step Guide

Code Example

Explanation

Using Built-in Animation Widgets

Example: AnimatedOpacity

Explanation

Practical Exercise

Task

Solution

Explanation

Summary

Flutter Development Course

Module 1: Introduction to Flutter

Module 2: Dart Programming Basics

Module 3: Flutter Widgets

Module 4: State Management

Module 5: Navigation and Routing

Module 6: Networking and APIs

Module 7: Persistence and Storage

Module 8: Advanced Flutter Concepts

Module 9: Testing and Debugging

Module 10: Deployment and Maintenance

Module 11: Flutter for Web and Desktop