Flutter is an incredibly robust and dynamic framework that empowers developers to craft visually stunning and captivating mobile applications.
This framework stands out thanks to Flutter Animation’s exceptional capability to produce captivating animations that elevate the overall user experience.
Flutter animation offers a comprehensive suite of resources for enhancing mobile application user experience (UX) by imbuing the user interface (UI) with seamlessness and authenticity.
Let’s explore some fundamentals of Flutter animations with a Flutter animation tutorial.
Flutter Animations-An Overview
Using Flutter Animation, programmers can easily design interactive and aesthetically pleasing user interfaces.
Animation in Flutter is like a visual illusion of motions made from images, widgets, or routes.
To create an animation in Flutter, you define the initial and final states of an object or property and then tell it how to interpolate between them.
Flutter Animation’s ease of use and adaptability are two of its most appealing qualities. It’s simple for developers to animate everything from simple buttons and icons to more complex widgets and snippets of text. The user experience can be fine-tuned by adjusting animation length, easing curves, and playback.
Other Flutter features, such as gesture detection and user input, work harmoniously with Flutter Animation.
What Are The Different Types Of Flutter Animations?
Flutter has many animations to bring your app to life. Fade, scale, rotate, implicit, and explicit animations are among these. Understanding animation types will help you choose one for your app.
- Fade Animation flutter: This animation allows you to smoothly transition an element from being fully visible to completely invisible, or vice versa.
- Scale animation: This animation allows you to smoothly resize an element, making it appear larger or smaller.
- Rotate animation: This flutter animation allows you to rotate an element around a specified axis smoothly. It can create exciting effects, such as rotating a card when flipped or adding a playful touch to your app by animating a spinning logo.
- Implicit: Flutter’s implicit animations are the animated transitions that happen mechanically whenever a widget’s property is updated. If you want a seamless transition between a widget’s old and new values, you may use an implicit animation when you alter its color or size.
- Explicit: Explicit animations are preferred when you need to construct unique animations with fine-grained control over individual animation parameters, but they need more manual input. Common techniques include tweens, animation controllers, and animated widgets to manipulate the animation process directly.
Flutter Animation Example
When pressed, a button in your Flutter app should trigger an animation. Let’s make something exciting and valuable to showcase the potential of Flutter Animation. We want the button’s size to increase and decrease gradually, and its color will shift from gray to blue, then blue to grey when the user presses it.
Flutter Animations can be used to create this effect. To begin, we establish a Flutter Animation Controller that manages the looping and stopping of the animation. To define the range of values for resizing and coloring, we’ll use a Tween.
Once the button is pressed, we invoke the forward method of the AnimationController to begin the animation. We use Tween’s interpolated values to change the size and color of the button throughout the animation.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animations',
theme: ThemeData(
primarySwatch: Colors.purple,
appBarTheme: const AppBarTheme(centerTitle: true),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _scaleAnimation;
late Animation<Color?> _colorAnimation;
@override
void initState() {
const duration = Duration(milliseconds: 500);
_animationController = AnimationController(duration: duration, vsync: this);
_scaleAnimation = Tween<double>(
begin: 1.0,
end: 2.0,
).animate(_animationController);
_colorAnimation = ColorTween(
begin: Colors.grey,
end: Colors.blue,
).animate(_animationController);
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
Future<void> _onButtonPressed() async {
await _animationController.forward();
await _animationController.reverse();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Animations')),
body: Center(
child: AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: _colorAnimation.value,
),
onPressed: _onButtonPressed,
child: const Text('Like'),
),
);
},
),
),
);
}
}
How To Make An Animated Widget In Flutter?
Here is how you can add an animated widget in the Flutter application:
- Define a stateful Widget: Create a new class in your Dart file that inherits from StatefulWidget. Identify your stateful widget with this class. Define a new class in this file that inherits from the State class. This class will manage your widget’s state and logic.
- Define the animation: Set up an AnimationController inside the State class of your StatefulWidget. With this controller, you can change how long your animation lasts and how it plays. You can choose the length of time and other properties.
- Implement the animation logic: Override the initState() method inside the State class. Inside this method, you can set up the AnimationController and tell it how to move using Animation or Tween objects. You can choose from different animations, such as fading in, sliding, or scaling.
- Build the animated widget: You can use the AnimatedBuilder widget in your widget’s build() method to add animations. Return the widget you want to animate inside the builder function of AnimatedBuilder.
- Update the animation: The animation can be triggered by invoking forward(), reverse(), or repeat() on the animation controller. These methods can be called in response to input from the user or other events.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animations',
theme: ThemeData(
primarySwatch: Colors.purple,
appBarTheme: const AppBarTheme(centerTitle: true),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
const duration = Duration(seconds: 2);
_controller = AnimationController(duration: duration, vsync: this);
_scaleAnimation = Tween<double>(
begin: 1.0,
end: 2.0,
).animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Animations')),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, __) {
return Container(
height: _scaleAnimation.value * 100,
width: _scaleAnimation.value * 100,
color: Colors.red,
);
},
),
),
);
}
}
Flutter Image Animation Example
In addition to some more steps and following the same steps mentioned in the above example, you can also make a flutter image animation.
We use the TweenAnimationBuilder widget to animate the image’s opacity from 0 to 1 over a duration of 2 seconds. The Image.asset widget displays the image, and the Opacity widget adjusts the opacity based on the animation value.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animations',
theme: ThemeData(
primarySwatch: Colors.purple,
appBarTheme: const AppBarTheme(centerTitle: true),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double?> _opacity;
@override
void initState() {
super.initState();
const duration = Duration(seconds: 2);
_controller = AnimationController(duration: duration, vsync: this);
_opacity = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
_controller.repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Animations')),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, __) {
return Opacity(
opacity: _opacity.value ?? 0.0,
child: Image.asset(
'assets/images/image.jpeg',
),
);
},
),
),
);
}
}
Tween Animation in Flutter
Tween animation is a fundamental animation technique in Flutter that enables you to transition between two values smoothly over the course of a given amount of time using the idea of interpolation.
Using the Tween animation available in Flutter spinkit, you can animate various properties, including color, size, position, and opacity. Using Tween animation, you can easily create effects like fade-ins, fade-outs, sliding transitions, and dynamic property changes in your Flutter app.
A Tween object whose value range is to be animated must be defined to employ a Tween animation. TweenDouble can transition between two given double property values smoothly.
👉 How to convert int into double
Animated Splash Screen Flutter
A splash screen animation in Flutter is an introductory screen that appears when launching an app. It typically showcases a logo, branding elements, or animations that capture the essence of the app’s design.
Here’s a guide on how to implement an animated splash screen:
- In your pubspec.yaml file, including the packages you’ll need. For example, you could use the flutter_svg package to handle SVGs or the flare_flutter package for more advanced animations.
- Design your splash screen UI in Flutter, which typically consists of your app’s logo or branding elements.
- Place that Splash Screen at the home property of MaterialApp Widget and your Splash Screen will be visible on the screen at the start of the application.
- Utilize Flutter’s animation capabilities to create appealing animations. You can use packages like flutter_svg to load SVG and flare_flutter to apply animation on it. Alternatively, you can use built-in Flutter animation classes like Tween, AnimatedContainer, or Hero for simpler animations.
- Before switching to the main screen, set your animation’s duration. Control duration with a timer or Future.delayed.
Flutter Animation With Inkwell Widget
The InkWell widget allows you to add interactivity and a wave effect to your animations.
The InkWell widget displays a ripple effect in response to user interactions like taps, providing a visual response to the action. It is frequently used to improve the usability and aesthetics of interactive elements.
You have to Wrap the widget you want to animate with the InkWell widget. This lets you detect user interactions on that widget, like taps.
Conclusion
Flutter Animation opens a world of possibilities for creating interactive user interfaces. You can create smooth transitions and delightful gestures and visual effects by incorporating techniques like tween animation. Whether a beginner or an experienced developer, mastering Flutter Animation can take your app development skills to new heights. So, unleash the power of Flutter Animation and elevate your app’s user experience. And if you’re looking to bring your app ideas to life with Flutter, don’t hesitate to hire a Flutter Developer to help you bring your visions to reality.
Happy animating and happy Fluttering!
