Flutter — Dominating the complex UI.
“People use only 10% of their brain” — Albert Einstein
There are two problems with the above statement. Firstly, Albert Einstein never said that. Secondly, the statement is incorrect. People use a much larger percentage of their brain.
However, this statement could be modified and stated as…..
“People use only 10% of Flutter” — Me
When students are first introduced to flutter, they learn how fast and easily it allows us to create multi-platform applications while maintaining a single code base with a unique customizable view. They learn that flutter enables them to make beautiful and captivating UIs such as these —
However, when they start off with their flutter projects, the UIs end up looking like this —
Not so captivating. Though these aren’t unpleasant to look at, they certainly don’t utilize flutter to its full potential.
Hence, this article focuses on what widgets help us implement our UI effectively and how.
To be able to implement complex UI in Flutter, we need to be familiar with what I term as the “Triangle of complex UI”. It comprises the — Stack, Transform and AnimationController.
People often underestimate the power of just these three classes.
Stack
Stack() allows us to place one widget on top of another.
Example —
This places three containers each on top of one another.
Stack has a Positioned() widget that allows us to position our widgets wherever we want. This is very powerful because we cannot achieve this using rows or columns.
Additional information — https://www.youtube.com/watch?v=liEGSeD3Zt8
Transform
Transform() helps us change the way another widget is painted. It also adds in transitions, hence making our app appealing to the eyes.
We can use -
Transform.translate(), and using ‘offset’ move that image.
Transform.scale() and using the ‘scale’ change the size.
Transform.rotate() and using ‘angle’ rotate it till an angle.
additional information — https://www.youtube.com/watch?v=9z_YNlRlWfA
Animation Controller
AnimationController() helps us control animations, i.e. it enables us to get to the final state in a smooth way. This is where most people get confused and tend to give up, hence looking for alternate solutions. There are three principle things one needs to keep in mind when we talk about animations —
- Ticker — This acts as a counter. Every time a ticker ticks, it triggers a new setState() to render something on the screen. We usually set the state object as the ticker provider.
- Animation Controller — This tells the animation when to start, stop, whether to loop, reverse, etc.
- Animation Value — This is what carries out the animation. Its value by default goes from 0 to 1.
We first declare the animation controller -
AnimationController _animationController;
Then initialize it with a duration of our animation in the initState() method. (‘vsync’ property refers to the ticker provider, which is the current state object)
To start running the animation from 0 to 1, we use the forward() function.
_animationController.forward();
Finally, in the build method, we specify the AnimatedBuilder method in which we specify our AnimationController defined earlier and declare its child class as the widget we want to animate. In its ‘builder’ property we can access the animation’s value and bring about the desired changes.
The builder property is called every time the animation controller changes its value.
additional information — https://www.youtube.com/watch?v=N-RiyZlv8v8
Now that you are geared up with these three classes, you can set out implementing beautiful UIs of your own.
For example, let’s try creating this drawer —
First, let’s find out what exactly is happening.
- There are two elements — White and Blue
- Blue element is behind the white element
- White element is decreasing in size
- White element is moving right
- Transition is smooth
We shall implement these designs one by one.
First, we put these two components in a Stack().
Step 1 and 2 are done. Now, to decrease the white element’s size, all we need to do is wrap it in a Transform() class and provide a scale.
Now to move it to the right, we simply add a translate property to the transform. This will make it go right.
Finally, to make the animation smooth, we need to use the animation controller. After declaring and initializing the animation controller(as mentioned earlier), we wrap everything in the AnimatedBuilder and bind the slide and scale to the animation controller’s value.
Finally, we wrap everything in a GestureDetector() so we can start/finish the animation.
And there you have it!
A smooth drawer animation using only three major widgets — Stack, Transform, and AnimatedController.
I cannot stress more on the importance and effectiveness of these simple widgets. Being thorough with these will certainly give any flutter UI/UX developer a significant headstart.
Credits- This article was inspired by Marcin Szalek’s Flutter Europe talk.
