Flutter – Movie Tween Animation

Basically in Movie Tween Animation, we define different scenes, each with its own set of tweens and then Animate them. In Flutter we can achieve this type of animation easily by using the simple_animations package. In this article, we are going to implement the movie tween animation with the help of the simple_animations package. The MovieTween class in the simple_animations package allows you to structure complex animations by dividing them into scenes, each specifying its own set of tweens for different properties. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Required Dependency

Add the below dependency to your pubspec.yaml file.

dependencies:
  simple_animations: ^5.0.2

Or, Simply we can run the below command in our vs code Terminal

flutter pub add simple_animations

Step 3: Import the Package

First of all import material.dart file and simple_animations package.

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Movie Tween'),
        ),
        body: Center(
          child: MovieTweenAnim(),
        ),
      ),
    );
  }
}

Step 6: Create MovieTweenAnim Class

In this class we are going to make different scene and animate them using the sime_animations package.Comments are added for better understanding.

Creation of different scenes :

// Scene 1: Change width from 0 to 100 over the first second
      ..scene(
              begin: const Duration(milliseconds: 0),
              end: const Duration(milliseconds: 1000))
          .tween('width', Tween(begin: 0.0, end: 100.0))
      // Scene 2: Change width from 100 to 200 over the next 800 milliseconds
      ..scene(
              begin: const Duration(milliseconds: 1000),
              end: const Duration(milliseconds: 1800))
          .tween('width', Tween(begin: 100.0, end: 200.0))
      // Scene 3: Change height from 0 to 200 over 2.5 seconds
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 2500))
          .tween('height', Tween(begin: 0.0, end: 200.0))
      // Scene 4: Change color from orange to green over 3 seconds
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 3000))
          .tween('color', ColorTween(begin: Colors.orange, end: Colors.green));

Dart

class MovieTweenAnim extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Specify your tween
    final MovieTween tween = MovieTween()
      // Scene 1: Change width from 0 to 100 over the first second
      ..scene(
              begin: const Duration(milliseconds: 0),
              end: const Duration(milliseconds: 1000))
          .tween('width', Tween(begin: 0.0, end: 100.0))
      // Scene 2: Change width from 100 to 200 over the next 800 milliseconds
      ..scene(
              begin: const Duration(milliseconds: 1000),
              end: const Duration(milliseconds: 1800))
          .tween('width', Tween(begin: 100.0, end: 200.0))
      // Scene 3: Change height from 0 to 200 over 2.5 seconds
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 2500))
          .tween('height', Tween(begin: 0.0, end: 200.0))
      // Scene 4: Change color from orange to green over 3 seconds
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 3000))
          .tween('color', ColorTween(begin: Colors.orange, end: Colors.green));

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: _DelayedAnimation(tween: tween),
      ),
    );
  }
}

Step 7: Create _DelayedAnimation Class

The _DelayedAnimation class in Flutter encapsulates the logic for an animated Container using the simple_animations package. This StatefulWidget creates a 5-second delay before starting the animation. The class contains a tween property, holding a MovieTween object, which defines the animation behavior with scenes and tweens for various properties. Comments are added for better understanding.

Dart

class _DelayedAnimation extends StatefulWidget {
  final MovieTween tween;

  const _DelayedAnimation({Key? key, required this.tween}) : super(key: key);

  @override
  _DelayedAnimationState createState() => _DelayedAnimationState();
}

class _DelayedAnimationState extends State<_DelayedAnimation> {
  bool isAnimating = false;

  @override
  void initState() {
    super.initState();
    // Delay the start of the animation by 5 seconds
    Future.delayed(Duration(seconds: 5), () {
      setState(() {
        isAnimating = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return PlayAnimationBuilder<Movie>(
      tween: widget.tween,
      duration: widget.tween.duration,
      delay: isAnimating ? Duration() : Duration(seconds: 5),
      builder: (context, value, child) {
        return Container(
          width: value.get('width'),
          height: value.get('height'),
          color: value.get('color'),
        );
      },
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Movie Tween'),
        ),
        body: Center(
          child: MovieTweenAnim(),
        ),
      ),
    );
  }
}

class MovieTweenAnim extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Specify your tween
    final MovieTween tween = MovieTween()
      // Scene 1: Change width from 0 to 100 over the first second
      ..scene(
              begin: const Duration(milliseconds: 0),
              end: const Duration(milliseconds: 1000))
          .tween('width', Tween(begin: 0.0, end: 100.0))
      // Scene 2: Change width from 100 to 200 over the next 800 milliseconds
      ..scene(
              begin: const Duration(milliseconds: 1000),
              end: const Duration(milliseconds: 1800))
          .tween('width', Tween(begin: 100.0, end: 200.0))
      // Scene 3: Change height from 0 to 200 over 2.5 seconds
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 2500))
          .tween('height', Tween(begin: 0.0, end: 200.0))
      // Scene 4: Change color from orange to green over 3 seconds
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 3000))
          .tween('color', ColorTween(begin: Colors.orange, end: Colors.green));

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: _DelayedAnimation(tween: tween),
      ),
    );
  }
}

class _DelayedAnimation extends StatefulWidget {
  final MovieTween tween;

  const _DelayedAnimation({Key? key, required this.tween}) : super(key: key);

  @override
  _DelayedAnimationState createState() => _DelayedAnimationState();
}

class _DelayedAnimationState extends State<_DelayedAnimation> {
  bool isAnimating = false;

  @override
  void initState() {
    super.initState();
    // Delay the start of the animation by 5 seconds
    Future.delayed(Duration(seconds: 5), () {
      setState(() {
        isAnimating = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return PlayAnimationBuilder<Movie>(
      tween: widget.tween,
      duration: widget.tween.duration,
      delay: isAnimating ? Duration() : Duration(seconds: 5),
      builder: (context, value, child) {
        return Container(
          width: value.get('width'),
          height: value.get('height'),
          color: value.get('color'),
        );
      },
    );
  }
}

Output: