When developing an application, we want it to be functional and to serve something that people will use. Achieving the first requirement is relatively easy; we just need to have a good idea that solves a problem and then develop the application. On top of that, we make sure that this app has no bugs, and we’re done. We have a functional application that serves something. Now, the question is how to convince the user to prefer our app over the competitor’s, to like our app, and recommend it to others.
One of the most important things in a mobile application is the UI (user interface) and UX (user experience). We can forgive some small mistakes in a mobile app if it’s pretty and has that “something” we like. I won’t go into how to do that here because that’s the designer’s job (you can hear about that on our webinar), but I’ll focus on how to bring the designer’s work into the Flutter application.
OK, what does Flutter have to do with it? Well, if anyone has tried, e.g., making animations for Android in XML, then they know it’s not the most fun job. One of the things I love about using Flutter is the lack of XML (I know there’s such a thing as Jetpack Compose, but it doesn’t seem to be as cool a tool as Flutter) and the ease of creating cool animations or complex UI.
Starting with Flutter animations
Starting with the simplest thing, which is to add a simple animation such as Lottie. In the case of Flutter, it is trivial – just use the Flutter package and you can already add animations to our project. However, these animations are quite limited.
We can use the Animation Controller to check if the animation is over and play it again or perform some action after the animation is over. But this does not give us as much power as another tool like Rive can give us. It’s already a much more interesting solution because it allows us to control the animation and what it does. One great example of this is the way that the possibilities of Rive and Flutter were shown.
I think everyone will admit that the animation using a bear that covers its eyes when we enter a password or enjoys when we manage to log in is impressive. It will make an even bigger impression on the user who sees it and simply likes our Flutter app. We can also try smaller things that will make the user smile slightly and think “hehe cool”, e.g.: that switch (the animation switch which is in the files) is going to be clicked a few more times to see the animation. Implementing this is easy, and all we need to do is add the Rive package to the project. Now the only thing that limits us is our imagination (and the project budget 😛).
OK, that’s cool too, but all in all, we can also achieve all this without using Flutter. Maybe it won’t be as easy, fast, and fun as using Flutter, but it can be done. So now let’s move on to what interests us the most, which is strictly animation support with Flutter. Here is a small disclaimer because, as we all know, everything can be done, but not everything is worthwhile, and that is where Flutter will help us the most.
Flutter gives us three simple but very powerful tools with which we can create very interesting animations and designs – AnimationController, Transform, and Stack. With these three things, we can create almost any animation or transition we can think of. To prove it, I refer you to Marcin Szalek’s videos, which thoroughly analyze the topic and step by step show how we can create animations that do “wow”.
Another person from our Polish backyard, who is very cool, interesting, and above all, understandable, explains the issue of animation in Flutter, is Dominik Roszkowski. Not only that, Dominik explained animation techniques at our Flutter meetup at Applover! :D. An interesting point when it comes to animations is also a topic that Filip Hráček brought up. You can check the whole thing here. But in short, animations can ensure that our application seems smoother than it is. I think that in the age of devices with screens with refresh rates of 120Hz, this is a strong argument.
Coming from our backyard, I can’t help but mention SuperDeclarative! which is a youtube channel that shows us how to create clones of popular (I don’t know what to call them here, they’re not exactly animations, so let’s agree to call them effects) effects such as Starbucks rewards stars or (my favorite) the effect of glitching text when changing. I must mention here one youtube channel that is The Flutter Way, and especially the series Animated Tesla Car Control App. If you like simple and clear but original designs, then you must check out this series. What is shown is simply beautiful!
Designing UI with Flutter
A vivid example of how design is very important and Flutter is the perfect tool for beautiful design is reflected in Google Play: “Reflectly is a personal diary and journal created using artificial intelligence to help you cope with negative thoughts, enhance positive ones, and teach you the art of well-being”. I think it is with an app like this that a pleasing design and the feeling that the app is ours or that it is our friend are very, very, very important. After all, this is an app we are supposed to have confidence in, not a soulless car review app. As I mentioned earlier, we can also achieve all this with native solutions, but (well, BUT!) with Flutter we can achieve it!
As we know, time is money, and it is with Flutter that we can save a lot of time!
Do you want to find out more about Flutter development?Talk to us!
Why is Flutter the best?
To summarize my argument for why Flutter is the best ( ͡° ͜ʖ ͡°):
- It saves us time, and time is money;
- Flutter is fun and easy. Creating complex designs in Flutter is less frustrating than creating the same things in XML, and as you know, a frustrated developer is no good;
- Flutter’s popularity speaks for itself. After all, Flutter is the fastest growing cross-platform framework out there.
For dessert, an example of a cool (I hope) feature that was created in Flutter by me.