:quality(90))
When thinking of a mobile application, we all want it to be beautiful, user-friendly, fast, and exciting to use. How to achieve that? Animations are essential to making the UI of a mobile app feel natural and smooth. Together with interactive elements and smooth transitions, they make the application simply pleasant to use.
Although it’s a “must” for mobile apps, developers usually overestimate the costs of this creative work or even say that it cannot be realized at all. So designers, clients, and developers have to seek a certain balance between creativity, time and costs of implementation (a classic project triangle I would say). But it’s no longer the case since there’s Flutter out there and animations are a powerful aspect of this framework. In this article, I will try to explain why you should consider choosing Flutter when creating custom interfaces containing a large number of animations.
Why is Flutter Great for Animations?
To understand this, you need to have a basic understanding of how the Flutter framework works. Flutter works
differently than similar popular frameworks, such as React Native, Xamarin, or Ionic.
React Native
uses the special JS bridge to connect your JavaScript/TypeScript code with the native part of the target platform
(ios or android). Of course, it decreases the performance. Also, we have to be familiar with native programming in
Swift/Objective-C and Kotlin/Java, when our goal is to create beautiful animation that looks “native”. Or we have to
find an already created solution using some library.
When it comes to less popular Xamarin, it is already not a great decision, since building complex animated UI there is pretty complicated and costly. It doesn’t fit the concept of cross-platform development, which has to be cheaper and faster.
Ionic also doesn’t use native parts for building UI. But while Flutter uses a graphic engine, which is optimized for mobile devices and has great API, Ionic uses web technologies (HTML, CSS, JS) and WebView. This solution works great for PWA and hybrid apps, but is not so great when we want to build a bigger high-quality product that still feels “native”.
So let’s take a look at Flutter.
- The Skia graphics. Futter doesn’t use the native UI part at all. When we run an application written in Flutter, we essentially run the Skia graphics engine that renders the entire UI for us. This allows us to develop applications for all platforms, without losing efficiency. Thanks to the Skia graphic engine, animations load quickly and are of premium quality.
- Ready-made widgets. Also, a great advantage in terms of animation is the substantial number of ready-made widgets that make work easier. We can use those that look identical to the native ones (as for IOS, as for android), we can make custom ones, implement more complicated ones.
- Dart. Flutter uses the Dart language, which is quite simple compared to JS. It is compiled straight into the binary code of the target platform, which is also good for performance.
- A declarative approach inspired by the React framework, based on widgets (components) is used to create UIs in Flutter. To further increase the interface's speed, widgets are rebuilt as needed - only when something has changed in them.
Graphics engine + animations? It already sounds like the perfect combination. But what does it look like from the developers' side?
Tools for Animations
We basically have 3 paths to choose from
1) Lottie animations
2) Animations with builders and controllers built into the framework
3) Rive
Lottie animations
Lottie animations are well-known, usually no interactions can be realized on this basis, but they also add up in one line of code.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json')
// Load a Lottie file from a remote url
Lottie.network('https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'
],
),
),
);
}
}
Here you will find
some more examples of Lottie animations.
Animations with builders and controllers built into the framework
Flutter has a considerable number of tools for creating animations directly from code. These allow you to animate UI elements that contain certain data, e.g., animating avatar, text, moving between screens, smooth appearance of content, feedback when pressing buttons, and so on.
// 1. use a state variable
double _value = 0.0;
// 2. pass it to the Tween's end value
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: _value),
...
)
// 3. Add a slider to update the value
Slider.adaptive(
value: _value,
onChanged: (value) => setState(() => _value = value),
)
double _width = 200;
double _height = 200;
Color _color = Colors.red;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedContainer(
// 1. pass the state variables as arguments
width: _width,
height: _height,
color: _color,
duration: Duration(milliseconds: 250),
),
),
// 2. add a button with a callback
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: _update,
),
);
}
// 3. Update the state variables to rebuild the widget
void _update() {
setState(() {
_width = 300;
_height = 300;
_color = Colors.green;
});
}
Also Flutter enable us to have almost full access to Skia API through canvases. It allows us to control every pixel and, of course, animate it as well. It is definitely a more advanced approach, but this one gives us the opportunity to implement even the craziest solutions from our creative designers. Push the limits!
DemoPainter({
this.angle,
this.offset,
this.offset2,
this.offset3,
this.startingOffset,
});
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Colors.yellow;
canvas.drawArc(
Rect.fromCenter(
center: Offset(size.height / 2, size.width / 2),
height: 300,
width: 300,
),
pi / 4 * angle,
pi - pi / 4 * angle,
true,
paint,
);
canvas.drawArc(
Rect.fromCenter(
center: Offset(size.height / 2, size.width / 2),
height: 300,
width: 300,
),
-pi / 4 * angle,
-pi + pi / 4 * angle,
true,
paint,
);
canvas.drawCircle(
offset,
25,
paint,
);
canvas.drawCircle(
offset2,
25,
paint,
);
canvas.drawCircle(
offset3,
25,
paint,
);
canvas.drawCircle(
startingOffset,
25,
paint,
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
If you are more interested in how it works, you can check it in the animation section of official documentation.
But still, what if we don’t want to spend our time creating these animations and our goal is to create just a beautiful cross-platform application, in a short amount of time? No worries, Flutter offers Material and Cupertino widget packages. There we can find all components we have in native UI with all necessary configurations.
Rive
Rive is the direction in which the Google and Flutter teams move all the time as they already have lots of joint presentations and plans. No surprise, after all, Flutter is the perfect tool for rendering this kind of thing. This tool is almost universal when it comes to animation - you can create simple repeating animations, realize custom icons, use the so-called "state machine" and make an interactive animation.
While the tools described above were pushing the limits and gap between designers and developers, this one has the potential to remove them altogether.
Rive’s team feedback about Flutter on official website:
“The first version of Rive was written entirely with JavaScript ES5 and DOM, which worked great for web, but not much else. So next they tried React with ES6. They used webpack and an early version of CanvasKit, but it was a significant effort to maintain all the different platforms.
Around the same time, Rive was working with the Flutter team on the Flutter Interact event. The more they learned about Flutter, the better fit it sounded like for Rive. It offered a cohesive platform with excellent tooling, a strongly typed programming language, and strong language analysis tools including a standardized formatter, built-in linting, language servers for popular editing environments, and the ability to test directly from editing environments.”
Combined, these tools result in amazing realizations of no less amazing and creative ideas:
{% video_player "embed_player" overrideable=False, type='hsvideo2', hide_playlist=True, viral_sharing=False, embed_button=False, autoplay=True, hidden_controls=False, loop=True, muted=False, full_width=False, width='240', height='480', player_id='84193626280', style='' %}
{% video_player "embed_player" overrideable=False, type='hsvideo2', hide_playlist=True, viral_sharing=False, embed_button=False, autoplay=False, hidden_controls=False, loop=False, muted=False, full_width=False, width='232', height='480', player_id='84195401216', style='' %}{% video_player "embed_player" overrideable=False, type='hsvideo2', hide_playlist=True, viral_sharing=False, embed_button=False, autoplay=False, hidden_controls=False, loop=False, muted=False, full_width=False, width='240', height='480', player_id='84194174832', style='' %}{% video_player "embed_player" overrideable=False, type='hsvideo2', hide_playlist=True, viral_sharing=False, embed_button=False, autoplay=False, hidden_controls=False, loop=False, muted=False, full_width=False, width='240', height='480', player_id='84194174832', style='' %}
Flutter allows us to raise the subject of creativity of the application, we can invent more interactive elements, add more animations, do more unusual things. And with all this, it doesn’t extend the development process to infinity and always has stable high performance and smoothness of our UI.
Let’s Animate!
Animation rendering is one of the most important things for graphics engines. Since Flutter is completely based on such an engine, it is ideal for this. From a developer's perspective, creating animations in Flutter is not black magic but rather a pretty clear process. The framework offers a vast number of ready-made solutions and even more tools to build your own. In a nutshell, Flutter has the following advantages:
+ Fast development process compared to native
+ Performance on the level of native solutions
+ Ability to create interactive animations quickly
+ Constant development and support by Google
:quality(90))