As a Women Techmaker Ambassador, I am proud to be part of a community that celebrates diversity and empowers women in technology. This year, Women Techmakers celebrates International Women’s Day with the theme “Dare to be”, which encourages everyone to embrace their uniqueness, challenge themselves, and pursue their dreams fearlessly.
In honour of this theme, I have chosen to challenge myself by taking on a task that I have never done before. As a tech enthusiast, I am always eager to learn new things and push my limits. This task is to create a dance for Ando-chan, which will totally push me out of my comfort zone.
What is Ando-chan
If you’re wondering what is Ando-chan, here is the answer: Back in 2009, when I started working with Android in Japan, “Ando-chan” is a nickname given to the Android mascot logo by the people in my office in Japan. The Android logo is a green robot with an antenna on its head, and it is the official logo of the Android operating system developed by Google. The logo has become very popular and recognisable worldwide, and it is often used as a symbol of technology, innovation, and creativity. It’s common for people to give nicknames to mascots or logos, especially in Japan, where this practice is widespread. Using “Ando-chan” as a nickname for the Android logo is a fun and friendly way to refer to it in my workplace. Therefore I continue use that name until today.
The idea of a Dance
Dancing is all about moving different parts of the body in a coordinated and rhythmic manner. In the case of Ando-chan, I want to create an animated version of it that dances in sync with music. To achieve this, I can use the Flutter animation framework to create a sequence of transitions for the different parts of Ando-chan’s body.
Let’s code
Before any coding, I usually create a code plan, just to plan out what I will do. So here it is, my code plan
Code plan: 1. Draw Ando-chan using Canvas with CustomPainter 2. Calculate each points for different position of different parts: left arm, right arm, head, left eye, right eye, left antenna, right antenna, left leg, right leg 3. calculate movements using math formula, and apply different movement to different part of Ando-chan’s body
As result, here is the sample of Ando-chan with points needed to identify its body part.
This plan does not work. As you can see in above picture, the complexity when drawing Ando-chan is already high, adding animation to this drawing will add on the complexity to the code, and soon the code will become a total mess.
So I changed my plan, the second plan to create an animated Ando-chan is to break down its body parts into separate widgets. I can then use the animation framework to define a sequence of transitions for each widget. For example, I can define an animation sequence for Ando-chan’s arms, legs, head, and body. Each animation sequence can have its own duration, delay, and easing curve.
So here comes second code plan:
Code plan 2: 1. use Column as outer layout for Ando-chan, which will contains it Head, body (with arms), and legs 2. use Stack to place detail items of Head into place, this includes Eyes, Face, and Antenna 3. use Row in the body to place left arm, body, then right arm 4. For the leg to join into the body while dancing, I will need to use SizedOverflowBox to extends the leg’s height, so there will be no disengage image when the leg moves.
Now it sounds like a better plan.
Here comes the code
With the plan above, I created multiple files for different part of the body, which will help me later to manage the UI and animation for each part
As planned, the full image of Ando-chan is a Column, in which, the Head is the top row. The second row in this Column is a Row that contains Arm (for left arm), Body, and Arm (for right arm). The last row in this Column is also a Row, that contains 2 Legs.
In order for the image to be adaptive to different screen UI, I use LayoutBuilder to get the size of available space to draw on, and by using constraints.maxWidth and constainst.maxHeight, Ando-chan will consume the full available space given to it.
AndoChanMeasurement is a helper class that will calculate all anchor points for Android image base on given width and height. The full source code for AndoChanMeasurement can be found here.
As planned, Ando-chan’s leg is created with SizedOverflowBox, and the height of the box is the exact height of leg’s measurement, however the height of the leg’s drawing is 1.3 times taller than the box. That is the beauty of SizedOverflowBox.
As result, Ando-chan is now created with different Widgets, and it’s separated into different files. Life is much easier now.
Add animation
After Ando-chan image is created, it’s time to add animation to it.
To have a list of movement in sequence, I chose to use TweenSequence to join multiple TweenSequenceItem into 1 large sequence, which will make Ando-chan dance.
A TweenSequenceItem contains a Tween which defines the start and end of the animation’s value. The duration of this Tween is defined by the weight of TweenSequenceItem. A weight of TweenSequenceItem defines its percentage of the animation’s duration. This is calculated base on the total weight of all TweenSequenceItem in a TweenSequence.
For example, if your TweenSequence has 10 items, each item has weight 1, then the duration of each Tween in each item is 10% the duration of the total animation. However if you add 1 more TweenSequenceItem to your TweenSequence, then the weight of your single item is now changed to be 1/11, which means the duration of this Tween is now 9.09% the duration of the total animation.
To create a dance as a sequence of movement, I break down the move into small individual movement, like left arm move and right arm move. The code below shows animation for left arm to move up, and quickly drop down then take a rest, while right arm will rest to wait for movement on left arm, then start to move up, and drop down.
Of course the dance is not this simple, there are multiple movements defined in way, and then they’re joined together in 1 large TweenSequence to create a dance for left arm, and right arm respectively.
I repeated the same process for right arm, and body jump, and head movement sequence. And finally, I have a simple Ando-chan dance.
Let’s add music
A dance will not be a interesting without the music. So let’s add music to complete this dance.
I chose to use package assets_audio_player to load music clip from assets. This is the easiest method I can think of at the moment. After spending time to search for music and ask for permission to use their music, I finally have a small cut of music to use in this app.
First, I add the package to my project using below command line.
flutter pub add assets_audio_playerThen I create a directory named assets under the project’s root directory, and save the MP3 I downloaded into that directory. Finally, I updated my pubspec.yaml to add link to my new asset.
Now the setup is done. It’s time to return to Dart.
In order to reuse the Audio for multiple play time, I create an object called player, with type AssetsAudioPlayer, and do some settings like this.
With this settings, whenever my music starts, the animation starts, and when my music ends, the animation will also end.
Lastly, I add a Button to start/stop the music.
Now everything is done, it’s party time.
And that’s it. I dare to challenge myself with a dream I once left behind. And here is the full source code if you’re going to try it out: Github link
If you like my work, please follow me for more tips and tricks with Dart and Flutter.
Comments