My Flutter Case Study
Introduction
I first heard about Flutter when I was searching through Medium. “Flutter the future of mobile”, “Why you should learn Flutter in 2020”, “How to use Flutter and influence people” (made that one up but totally using it for another article!) flooded a lot of the search results. Reading article after article about how great people were saying Flutter was, I thought I would add this framework to the tool belt (another way to not finish my side projects).
I decided I was going to build an app in my spare time after learning some of the basics on Flutter. I work as a mobile developer, so I have mobile experience and I didn’t believe the transition would be too difficult. But I wanted to set some challenges when building the app. For this, I decided to come up with the below list of constraints for myself to make building the app a bit more fun. Here I have listed these challenges I set myself:
- I have a week to build as much as possible. This involved working on into the evenings after a day of work (sometimes even into the early morning as I got carried away) and weekends.
- I can use some open source widgets but I need to build as many as I can myself.
- This is just for Android (for now).
- I need to make it look fancy! Which to me meant making an effort on UI/UX.
- I need to put the end result in the app store in Beta and get someone to download it.
From paper to screen.
Say hello to Mooderate (which was previously Mooderise and before that Jotter).
Mooderate (not the final name I am sure) is an app which allows its users to record their mood through entries and a way to store memories in a journal like fashion. It allows them to create entries which show their emotion through fun emojis, capturing and showing pictures of the day along with adding a description and hashtags. App security was something I wanted to attempt and I feel it is a huge part of it as it is personal to the user. Therefore, the user has the option to open the app with either a pin, fingerprint or both.
Just to put the above screens into perspective on the animations, widgets, functionality, and flow. This is what a widget/screen looks like as default when created:
Making Mooderate was seriously fun after learning the basics. It was easy but what was surprising to me was how fast I was able to do the above and how smooth the application worked out of the box. How fast I was able to develop actually led me to work later nights because I kept thinking:
“I’ll just make this quick change to see if it works…great it does, let me just edit it…cool! Let me add something else, will only take a second!”.
I would still be working through the basic set up using Xamarin and having to work through the XML by the time I had things saving to local storage.
Speaking of the local storage, I used SQLite which was a huge plus as I didn’t need to learn a new database to store my data on. I could use the mobile standard and something I was familiar with. But I still needed to extract the database away. I did some research into the Provider Architecture which was very easy to follow and understand. I was able to understand this due to some web technologies framework methodologies which were similar.
This pattern allowed me to communicate to the database in an MVC way where my database was the model and the provider was my controller which managed what displayed in my view. Great!
The Fancies
I loved the animations of Flutter. They were seamless. I researched what I needed to use, and I found that heroes and transitions were the two main elements that were best suited for navigation. They made sense for how I wanted my app to flow. I did find using some animations a bit more difficult to follow. This is when I went back to look at the challenges I had set myself at the start of the project. I came back to the point I had written down about using existing widgets, and because everything is a widget in Flutter, including animations, I found this library animated_widgets. It’s a great library to use for out of the box animations, which I also plan to use for future projects too. I used some other open-source widgets to speed up my application building which I found through these amazing sites:
Difficulties with Flutter coming from other frameworks.
Not everything was simple and smooth, some areas I had to spend more time and effort to understand topics which slowed me down somewhat. These were mostly around how Flutter uses state. When I worked with Android Native and Xamarin, state to me was around the onSavedInstanceState lifecycles where I would save my state in Share Preferences. Then when it came to Ionic or React Native there were stores like redux I could save state with. But I couldn’t get my head around Flutter state management at the time.
To start off there are basically two kinds of widgets Stateless and Stateful. They do exactly what their names say they do. One holds application state, one does not. When building the entry form screen I tried to be a bit clever in creating entries. I used multiple widgets to choose an emotion, enter text, choose a photo etc. If I wanted my emotion’s state to be saved, I’d write something like:
setState(() { entry.emotion = choosenEmotion;});
Flutter would manage this for me. Now what I needed to learn (the hard way) was that when data in the widget tree has its state changed, Flutter will rebuild the widget tree of the widget that was changed down the tree. So, change a few things on the entry page and then click on an area which sets the state, everything gets refreshed that was previously filled in. This is easily fixed and manageable of course, the internet told me. So after doing some more research, the Provider pattern seemed to be what I was looking for. It really helped me with managing the state of an object through different widgets instead of injecting into every widget that I wanted to use it in.
My Road to Beta
When I was happy that a user could work end to end, creating an entry, being notified to create one daily, change their theme and be able to get a report on their monthly entries. I decided it was time to package up and put it into Beta. While creating the storefront for the app to be held in, I decided to work with App Bundles as oppose to the original (less Google Play preferred) APK. I followed the documentation to get the app set up with relative ease. Getting it signed, configuring for release, and bundling it up. After sharing the bundle with the Play Store, it took around 3 days for it to finish review which I did not continuously check my emails for an update every 10 mins. This felt very familiar to me and I was happy nothing new needed to be done to release the app. No other configurations or tools.
Conclusion
“I will not be building a mobile app with another framework again. Do other frameworks exist? “ — Le me.
Jokes aside, I lost track of time. Sometimes, just coding away and seeing my changes show very fast due to the Hot Reload feature of Flutter. Seeing how fast things are made and how speedy the app runs on the real device is a massive win for me. Building in Flutter brought back my creative interests of building things, it was really fun to code again. With Web and Desktop soon to come, a whole application could be shared on multiple platforms with the same code base, without using other technologies to work with. Fuchsia which is Google’s new OS coming sometime in the future will be a Mac and Microsoft competitor. Flutter and Dart are what it will use to run apps. Flutter really is the future for cross-platform in my opinion and I will be making more apps and using Flutter more.
Thank you for taking the time to read my article. I hope you enjoyed it :). I’m hoping to write more to upskill in writing so I appreciate any feedback. I love technology and always wanted to write about it the way I like writing. So most of my articles are about issues and life lessons I’ve come across that I hope to help people. So if you are interested in seeing more please follow me :).
