Syno | Learning Flutter

Julius Karl

Follow

Published in

The Startup

6 min readSep 25, 2020

--

In recent years Flutter has slowly been growing in popularity seeing itself in league with the likes of React Native and dare I say even Kotlin/Swift. As a developer with experience in website development, the rise of Flutter definitely peaked my interest and although I’ve had nightmares in the past working with React Native I really wanted to have a solid mobile development framework that I could specialize in. When it comes to adopting a new language or framework on a whim, I tend to struggle with maintaining my study since coding principles are the same across most programming platforms anyway plus the anticipation of tutorial hell just wasn’t worth the investment. When it came to Flutter however I was fortunate enough to have been sitting on a mobile project plan for a while and so it was the perfect opportunity to begin my journey with Flutter.

1. Objective

Back in August 2019 I used to volunteer as an English learning support for international students at the University of Auckland and one thing I often found myself doing was having to not only define certain words but to also give examples of sentences and synonyms. This led me to the (very basic) concept of developing an app that would help these students for that very purpose and at the time I was a strong web developer so my first instinct was to develop a website that would produce the product. Initially the idea of deploying this application on a website sounded like a closed case and I was eager to start however after thinking about the product realistically — and from the consumer’s perspective — I realized that despite my lack of mobile development knowledge it would still be a much wiser decision to invest in learning a mobile development framework and deploying it on a device that is much more accessible to them at all times — especially when it’s needed most — than to build a website and trust that the user would either be near a computer or manually use their mobile browser.

So what does it do?

Gets user input (as spoken dialogue)
Outputs a definition of given word
Displays a list of synonyms for given word

Simple enough right? Coming from a React and JavaScript background I opted to look into using React Native as the main framework for this application since most of the syntax is very similar to React. With React Native the code was fairly easy to understand however when it came to deployment builds and working with Expo/Expo-CLI I found myself running into problems constantly, so much so that I deferred the project indefinitely. So now I was left an unfinished project, an unfulfilled vision and a headache.

2. Flutter

Fast forward a year later and now i’m stuck at home during the 2nd wave of the covid-19 quarantine. In the midst of isolation I was still pursuing my web development career and in doing so spent a lot of time building websites and keeping up to date with development forums. One night I came across a YouTube video discussing a new UI framework called Flutter and after watching the demo I immediately fell in love with it. Flutter is an open-source UI framework created by Google and works alongside a programming language ‘Dart’ also created by Google. The main highlight of Flutter is that it has a single code base so it doesn’t need to be re-written for different devices however what caught my attention was just how beautiful the UI appeared for how simple the code that produced it was. With so much extra time on my hands and a new found interest in mobile development I thought I would give this app one more chance.

Had this project been on a larger scale — and possibly with a team of developers — I would have considered implementing agile methods and possibly a CICD pipeline however in this situation a single whiteboard was perfect for this amazing team of one developer. This left me in a situation where I was developing an application idea while concurrently trying to learn Flutter, thankfully the motivation and desire to produce at least one release build kept me from losing momentum and ending up in tutorial hell.

“Hello World? Greetings Earth!” — Figuring out how to structure and layout widgets in Flutter.

Getting a **FloatingActionButton()** to print “Pressed”.

Flutter’s **Drawer()** widget makes it easy to implement a toggled side drawer.

Using Flutter’s **speech_to_text** package to detect user input.

Playing around with the package and noticing a few bugs (which may or may not be due to my device)

Using the input to fetch data from the WordsAPI. Funnily enough I was using the wrong endpoint — I mean who doesn’t know what a banana is?

3. Issues

At this stage I started to get distracted with the direction of this app, discovering even just a fraction of Flutter’s capabilities in combination with all the freely available API’s online I was flooded with so many new project ideas and was getting a bit too excited for the application’s own good.

So I went back to the whiteboard to reassess my original vision and noted down some bugs or modifications I encountered during the development process.

I realized I possibly wont be needing database access — no **Firebase** this time.

Everything was slowly coming together perfectly and it started to resemble the makings of an actual mobile application.

**‘Hello’, ‘Human’ —** At the time of recording I wondered why it struggled to detect user input but I later realized the phone holder I used was blocking the microphone.

4. Testing

I basically used a TDD approach and Unit Testing with almost every build. Thankfully this app wasn’t too complex however I did encounter my fair share of issues, the main one being internet connectivity. As a web developer connection to the internet isn’t much of an issue considering it’s usability since websites need internet to work — with the exception of API and Database calls — so having to handle connectivity in Flutter was a bit tricky at first but eventually understandable especially with the connectivity package.

Handling connectivity issues that may arise.

5. Deployment

**App Demo**: https://www.youtube.com/watch?v=PF5ZApyPa9o

Deployment for mobile apps is completely outside the scope of my knowledge since there is very little overlap with website deployment and mobile app deployment. One of the main benefits of Flutter is it’s single code base meaning that your application can be written once and deployed to both iOS and Android systems. In hindsight I should’ve realized this sooner but I discovered that app deployment for both iOS and Android isn’t free and this was probably the biggest hindrance to me for this entire project however I eventually caved and purchased a Google Developer Account. Because of the current global climate surrounding covid-19 there have been longer than usual review times on the Google Play Console so my app is still in review for release but otherwise finished with version 1.0

Usually I would also develop a web app to match the mobile app but since this project revolved around the mobile app as the primary product I resorted to using basic landing page.