How we built Flutter app presented at MWC'19 in one month

Feb 26, 2019

One developer, one month and one Flutter app in production. This is the story of building a Flutter production app in just one month with no prior experience in Flutter or Dart and launching it at Mobile World Congress 2019 in Barcelona.

Some might say it’s crazy, but we say it’s the power of Flutter, a mobile SDK by Google that allows you to build native Android and iOS applications from a single code base. This is the Flutter diary from the perspective of a software engineer at Nevercode. From day one and picking up Flutter to the beautiful native-looking apps in Google Play Store and Apple App Store.

Prologue

On December 4th at the Flutter Live event held in London, Google announced the release of Flutter 1.0, an open-source mobile toolkit for building native Android and iOS applications from a single code base. At the same event, Nevercode launched its dedicated continuous integration and delivery (CI/CD) tool for Flutter applications named Codemagic.

Launching the next milestone, Flutter 1.2, at the most important meetup for the mobile industry, that is MWC 2019 Barcelona, is only the next logical step. Codemagic CI/CD is growing along with Flutter and the Flutter community and was proud to announce its newest mobile app dev tool Testmagic built with Flutter. Testmagic helps you to distribute your CI/CD builds and test Android & iOS apps on real devices. Read more about what is Testmagic and how to get started with Testmagic.

Now, let’s dig in how to build a Flutter app in a month. Meet Andri, software engineer at Codemagic by Nevercode.

Day 0 // Getting started

Being an experienced developer, I understood that the first thing I need to do is set up the environment because nothing distracts you more than a forever-lasting versioning hassle, new IDE or light theme.

I decided to go with the latest and ~greatest~ stable version of Flutter 1.0.0 from the channel Stable. Installing it was not a big deal — clone the git repository, add executable to the PATH and switch the channel.

Fortunately, I already had Android Studio and Xcode set up before. This probably saved me around 30-60 minutes.

As it was suggested in Flutter documentation, I ran the flutter doctor command which gave me the following output with several warnings.

Flutter doctor
Flutter doctor

At this point, I decided to ignore those because my plan for the beginning was running the app on the iOS simulator or Android emulator. I have also ignored the warning around IntelliJ IDEA because my IDE of choice is VS Code.

Setting up VS Code was as easy as always because this is the go-to editor I use on a daily basis for Python and JavaScript development. Speaking about Flutter, the only things I had to install were Flutter and Dart extensions. These two extensions have a lot of cool features, but the killer ones for me are debugging and code formatting.

To use debugging, it is enough to launch your simulator of choice (iOS simulator in my case) and start the debug session from VS Code toolbar -> Debug -> Start Debugging.

Flutter debugging
Flutter debugging

Day 1 // Time to code

It is time to start the real work. No more time to look for the best editor theme or setting up the hotkeys. I had to start writing the code. Without hesitation, I clicked on the first 3-hour long video on YouTube which promised me to teach Flutter and Dart from the scratch (that I have 0 experience with). What could go wrong? We’ll see.

Of course, everything started with the basics. Fortunately, Flutter has a quite widely used idea behind structuring the application — widgets. As a React developer, I immediately saw parallels between Flutter and React Native, widgets and components.

To get started, the tutorial suggested going with the stateless widget, then introduced stateful widgets. However, the real game started when it was the time to separate code by different files. I understood how to work with the combination of widgets and the nestedness of them in order to write cleaner and more readable code that is logically separated by files. So far, so good.

Later in the video, there was a moment every man is scared of — an assignment task. Fortunately, it was better than it sounded. The task prompted to create an application with a text field and a button. The button should change the text on a click, the code should be logically structured into different files, a combination of stateful and stateless widgets. In other words, a piece of cake!

The beginner 1 : 0 Flutter.

Day 2 // Research

I decided to dedicate this day for another round of tutorials. There’s tons of useful resources on Flutter on GitHub.

The preview of the video titled “Flutter Crash Course - Building a Complete App From Scratch” caught my eye. Turned out, that it was actually a very good and interesting video about not so basic stuff. This time, I was introduced to different UI components of the Material design package which completely blew me away. The cherry on the top was animations in Flutter — if you would have told me that it is going to be so easy a year ago, I would have not believed you. It is just mind-blowing because by specifying only 2 vars standing for animation (Animation and AnimationController) you can have your text pop-up with bounce effect — this is just so-o-o time effective. And believe me, as a person who did Android and Unity programming before, I know what I am talking about.

Day 3 // Hitting the wall

It was time to start doing a real job and learn from my own mistakes during the process. I typed in **flutter create super-duper-secret-project** and went for all in with all of my courage. I decided to separate code from the beginning by different sub-directories. In a few minutes, I had my big, white and glorious landing page based on Inkwell widget.

If only everything were as easy as it is in tutorials. My first big struggle was authentication because I decided to go with OAuth of one popular service. Without going too technical, I will try to explain this in few words: I set up everything the way it was suggested in the documentation and examples of the Flutter plugin, yet I was always redirected to localhost. I hope it was a lack of attention from my side and not any kind of a bug, but it was Friday and I decided to leave it for now.

Later, I changed my mind and started with a mock-up of sample data before connecting the app to a real backend. The next page after landing would be the main page for the app user. It will present the most important and quickly accessible information. So far, I can’t tell you more. I needed to display an unpredictable amount of elements on the UI as a scrollable list so my widget of choice was [ListView]. To get sample data, I went to a good old source — jsonplaceholder.typicode.com.

The next big challenge for me was presenting the elements on the UI. Because I needed to place elements horizontally, I went with the [Row] widget (who would imagine, right?) and immediately were failing to place the elements on a single axis. Thanks to Medium tutorials (see the references below), I managed to do so only after a few hours of digging information from Flutter docs. However, the end of Friday was at hand, so the rest is left for Monday.

Day 4 // Present

It was a long ride. You know, it’s not my first diary I abandoned after 3 days, so I’ll try to sum everything up in this part since it is close to the end of the beginning. Everything turned out so great and Flutter exceeded all my expectations. I was impressed with the easiness of developing with it — hot reloads, the intuitive hierarchy of the widgets, scalability, the list goes on.

However, it was not all that smooth and I was also struggling a bit during the development process.

The most complicated problems I faced were related to third-party modules and plugins. Basically, every time I added a plugin which is at least a bit more complex than an icons pack, I expected an issue to come. Oh, I dreamed that it would not be like that, but it was. The biggest problem that I can recall at the moment was related to a plugin used to request permissions on the device. With Android, it went smoothly. You know all about iOS though. Turned out that this plugin was using Swift to request permissions on iOS and it was just a hell to understand what was happening.

I just wish that in the future, the Flutter team or the plugin devs would catch errors of this kind and tell you what is happening.

Until then, if you ever encounter an issue related to a missing header file — check the support for Swift in Podfile. I think it should be added by default on new project creation. Once this issue was resolved, other problems did not look that scary.

When I received the design mock-ups and started to work on the UI part of our application, all puzzle pieces started to come together. Being a back-end developer most of the time, I was impressed with the easiness of styling widgets with Flutter.

I felt like some kind of magician — I snap my fingers and a new button with gradient is there, I snap once again and the new Application card is ready.

I think that this is something that everyone who worked with Flutter can relate to. Ten points go to the Material design module team!

Testmagic beta by Nevercode

To unravel the secret, what is this flutter create super-duper-secret-project I have been working with? I am proud to present you Testmagic. An app that makes testing apps fun and magical again.

Testmagic enables you to:

  1. View the builds you run on your CI/CD tool
  2. Install built apps on connected devices
  3. Get notified about new builds via push notifications
  4. Report feedback

Testmagic is the missing link in the pipeline between building the app and delivering it to the end user. It enables non-technical people to download the builds on mobile devices and keep track of the build process. At the moment, Testmagic is integrated with Codemagic CI/CD, , but integrations with other CI/CD tools is in the cards. You can read more about the vision and future of Testmagic here.

Testmagic is available for download on Apple App Store or Google Play Store. You can install the Testmagic app on iOS and Android devices just like normal apps.

Check this tutorial to get started now.

Wrap-up

The app is built and distributed with Codemagic CI/CD for Flutter. It was so interesting to see our own product from another angle of view. I had many thoughts about how and what to change, but Codemagic was already nearly perfect. From a Flutter developer’s perspective, I set up everything once and voilà — it was working without any problems. I am really proud of what we have achieved with Codemagic!

At the time of writing this, it is two days before we will announce our mobile application on MWC’19. I am constantly going through the app, checking all the details and I understand — it is not perfect yet and there is a long way ahead, but I have never been so proud as as I am at the moment. I am proud of my team at Nevercode — thanks to all of them for supporting me in this journey. I am proud of the people from Flutter Study Group for assisting me when it was needed. I am proud of myself because I built an application in one month from a scratch without any prior experience.

I want to encourage all developers and newcomers to try out Flutter — believe me, you will become best friends with it. You will go through water, fire and copper pipes and you’ll never forget this journey.

Thank you for bearing with me and I hope you enjoyed this ride.

Andri J.

“Carry on my wayward son

There’ll be peace when you are done“

Useful resources to get started with Flutter development

Flutter Documentation

Official Flutter YouTube channel

Awesome Flutter Resources

Flutter Weekly Newsletter

Flutter community articles

Flutter Discussion groups

Flutter Chat room

Flutter Community Support

Flutter Weekly online hangout

Codemagic Community Slack

Helped me:

Flutter - Row/Column Cheat Sheet, Julien Louage

Slivers, Demystified, Emily Fortuna

A Deep Dive Into Flutter TextField, Deven Joshi

Feel free to try it out and submit your feedback and feature requests in the #testmagic channel in our Slack community for Flutter and CI/CD and approach us on Twitter @testmagicio or Facebook @testmagicio.

Codemagic CI for Flutter