Flutter - Movie Tween Animation
Last Updated :
23 Jul, 2025
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:
Similar Reads
Flutter - Lottie Animation Visualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static
3 min read
Flutter - Wave Animation In this article, we are going to make a Flutter application that demonstrates the creation of a dynamic wave animation. This animation simulates the motion of water waves, creating an engaging visual effect that can be used in various Flutter applications to add styling effects. A sample video is gi
5 min read
Flutter - Hinge Animation Animations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil
4 min read
Rive animations in Flutter Rive is a very useful animation tool that can create beautiful animations and we can add these in our Application. In flutter, we can add animations by writing so many lines of code but this is not a good practice for a developer. Instead of writing lines of code to create animation, we can create o
2 min read
Rive animations in Flutter Rive is a very useful animation tool that can create beautiful animations and we can add these in our Application. In flutter, we can add animations by writing so many lines of code but this is not a good practice for a developer. Instead of writing lines of code to create animation, we can create o
2 min read
Flutter - AnimatedIcon Widget Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is show
3 min read