Our Journey With Flutter – Part 2

If you haven’t already done so, read previous blog post by our tech advisor about our journey with Flutter. After a months of development, We’ve launched the first version of the app in Google Play Store and Apple App Store couple weeks ago. This post is meant to add more insight of what our experiences up to our first release.

How We End Up Choosing Flutter

First, a little back story on how we choose Flutter. Our whole team member in Tanibox that worked on this mobile application has extensive experiences on software development as general (desktop, web, mobile, IoT, etc). So when we discussed our option for developing mobile apps that has to be released in couple of month, we immediately agree to choose Flutter as our tools because we didn’t quite like all the alternatives. Flutter is still quite new at that time, we started with version 0.3.x. And instead of using more stable sdk from Beta Channel, we use Dev Channel in hope that we has access to new feature as soon as possible.

What Went Right

  • Hot Reload A while ago, if you search the internet for Flutter, most of it will be from Flutter’s site. There’s still a small number of post in the Internet about Flutter from other developer. But when there’s an article about Flutter, most of it contain at least one thing in common: Hot Reload. Flutter’s hot reloading has helped me a lot. It just feels like when we develop HTML page. Type in, save, and voilà the result is visible on the screen, wether it’s in simulator or mobile device.

  • Widget Just like many info about Flutter has said, everything in Flutter is a Widget. From a text box, button, even content padding can be a widget. Composing a screen using widgets is quite easy, because each widget can be nested under other widget. Flutter has extensive number of widget available at your disposal, even right now I’m sure I didn’t know many of them. As Flutter is still actively developed, some new version could add more widgets to the library.

  • Binary Size Other consideration when we choose Flutter is the binary size of the result application. For us, the binary size from Flutter is acceptable. And with the release of Preview Release 2 version of the SDK, Flutter’s developer has been able to reduce the size of the binary size.

  • Support Compared to other frameworks, Flutter community is still quite new. When we started a couple months a go, many google search would link me directly to their github issue page. Their support has been great. For example when one of my colleague encounter a bug in the engine, the Flutter’s team immediately helped him solved the problem. Lately, I see more QA about Flutter in StackOverflow. And this seems true according to this chart from Google Number of StackOverflow question views tagged with each of four popular UI frameworks over time chart Number of StackOverflow question views tagged with each of four popular UI frameworks over time

  • Localization At first, we designed Gro App with English as the main language. But later in development, we switched it to Bahasa Indonesia. To accomodate that, I’ve started with this great tutorial on Flutter’s site and work my way from there. And now, Gro App support both Bahasa Indonesia and English.

  • Webp support Our application has a lot of images inside. And with that comes a great concern of our application’s binary size. One way to reduce it would be reducing the number of images we use or reducing the image’s files size. Webp has smaller file size than PNG, and it support animation just like GIF does. And so we choose webp for most of our images. But it did came with a small problem for us to tackle later on.

What Didn’t Go As Expected

One major obstacle in the development of the UI fro Gro App is when we choose to use webp animation file for our plant animation. We noticed that there’s an artifact around our webp animation image. And as we use Dev Channel of Flutter SDK, this problem seems fixed in one version but appears again in later version.

Animation with artifact
Animation with artifact
And because of that, I’m not really sure if this bug is from our webp animation file or inside flutter rendering engine. So instead of using webp animation, I’ve created a script to display simple image animation. This script would load all animation frames file into memory and display it alternately depends on the animation fps (Frame per Second) setting.
Animation without artifact
Animation without artifact

Conclusion

After months of working using Flutter, if anyone would ask me now on what tools to use for hybrid app development, Flutter would be my #1 suggestion for them. Ease of use, rapid prototyping using hot reload, and a lot of off the shelf widget collection makes Flutter a great choice for app development. And unless there’s a better substitute, we would use it for years to come for our future projects.
Comments on Facebook