September 7, 2022
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.
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.
Graphics engine + animations? It already sounds like the perfect combination. But what does it look like from the developers' side?
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 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 { |
Here you will find some more examples of Lottie animations.
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 _width = 200; |
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({ |
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 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:
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.
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