Mooderate Screenshot

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).

  1. I can use some open source widgets but I need to build as many as I can myself.
  2. This is just for Android (for now).
  3. I need to make it look fancy! Which to me meant making an effort on UI/UX.
  4. 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).

A default screen in Flutter when no widgets are added. (Similar to my brain in the morning with no coffee)

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.

setState(() {    entry.emotion = choosenEmotion;});

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

Mobile and Cloud Consultant | Coffee Lover | Creator | Hoping to better my writing skills and learn more about the technologies I'm writing about.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store