The Lockdown Coder: Getting to Grips with Flutter
Flutter is pretty impressive, I must say. You can create a reasonably good looking app with minimal effort thanks to Material Design. My first ‘big win’ was to create an app that allowed me to search through Brewdog beers and check out the recipe and brewing methods for each one. Generously, Brewdog release the recipes for all their beers in a free-to-download PDF that Sam Mason has used to offer an open source API — providing me with the data I needed to create my app. But let’s start from the beginning.
I knew Flutter used Dart as its main language and I didn’t know anything more than that. Whilst I did read a number of articles around the subject I found the most useful thing for me to do at the time was to enrol myself onto a short course. Udemy was doing a special promotion (although they always seem to be doing a promotion!) and I chose ‘Flutter & Dart: The Complete Flutter App Development course’ by Paulo Dichone for around £15. It was particularly useful as it was like hand-holding from the beginning to the end: installing the software, covering the basic building blocks and useful theory to actually publishing your app on Google’s Play Store or Apple’s App Store.
My approach at the time was to get my headphones on and steamroll through the videos. I was learning by watching and ideas and concepts became easier to understand — I felt like I was making good progress as I had watched chapter after chapter and actually understood what he was teaching. I wasn’t coding along as it seemed fairly easy when all he was doing was showing you how to display ‘Hello World!’ on the screen (the classic starting point for any beginner’s tutorial). However, when I decided it was finally time to get coding for myself I found myself stuck at the first hurdle. What I do I type and where do I type it again? It all seemed familiar but only in sporadic, fragile whispers. I needed to start from the beginning again and code along. What helped most was deviating slightly from what the tutorial was telling me to do. In a sense, it was pushing the boundaries out of the comfort zone and into the ‘stretch zone’ but no further where I would start feeling overwhelmed. It was in this stretch zone that I learned the most because if things didn’t turn out how I had anticipated I could do some research around it and fix it. For me, actually coding along and researching around the subject as well as following the tutorial was the best way to learn. I reverted to my age-old studying methods and started to write key pieces of information down.
I went through the Udemy course and created my own slightly different variations of what the tutorial was telling me to do at different stages. It was helpful as each app build was relatively small and manageable (e.g. building a biz card app, calculator, trivia app). I made the mistake early on to try and create an all-singing and all-dancing app but the complexity was too much too soon — the progress was slow and curtailed. Rather, the repetition of starting and finishing small apps was more beneficial because I got used to the process and the code that I needed to start up a new project and I became increasingly comfortable going through the motions.
In terms of time, I was able to comfortably make my own apps within a month of starting the course. There were flaws in the coding and I didn’t understand everything fully but I could get an app to do what I wanted it to do after some head scratching and tinkering.
Working on my Dart game
The Udemy course I enrolled on helped me understand the basics of Dart. However, it was still a little confusing how it worked with Flutter if I’m honest but it became clear that if I wanted to manipulate data then Dart is what will help me accomplish that. For example, with the Brewdog app I pulled data into my app using an API and thereafter I used my Dart skills to manipulate this data and strip it down to only the bits that I needed.
I wanted more practice with Dart and came across a neat website called Codewars, which rifts off being in a karate dojo and needing to work your way up through the coloured belts until you get to black belt. The spin here is you pick your programming language and then work through a series of challenges that are graded according to your rank. If you successfully complete it then you get points and when you earn enough points you move up a rank. If the challenge is too difficult for you to can check the solutions proposed by the community but you will forfeit any ranking points for that specific challenge. It was a great way to learn Dart and learn how to manipulate data. When I needed help I tried to do as much research as I could myself before relying on the community. Websites like Tutorials Point provided me with quick overviews and examples of the different functions available in Dart. There are times when the Codewars challenges are more of a math challenge than a coding challenge and I found I couldn’t even solve the math challenge let alone code a suitable solution. Nevertheless, it was a fun way of getting the practice that I wanted.
Material Design: Google’s idea of how apps should look
The Flutter tutorials and articles all leaned on the Material Design framework to build apps. You would essentially wrap your app with MaterialApp, which provides you with a ton of functions to help you make good-looking apps fairly easily.
Material Design is Google’s idea of how the user interface for digital products should be designed. They provide in-depth style guidelines and theory if you want to get into it but if you are familiar with how Google apps look a certain way then that is essentially Material Design in play. Using the Material library with Flutter allows you to bring in components that have already been styled according to the Material Design guidelines so things start looking pretty good in your app with minimal effort. App bars, circle avatars, list views, cards and all sorts can be brought into your app. The material library also provides you with functions that help with layout, alignment and gesture detection amongst many others so it’s definitely worth getting to grips with what it has to offer.
Using the material library is a bit confusing at first as there generally seems to be a component that is wrapped with a function that is wrapped with another function and each function has its own parameters. However, once you start finding your feet with the syntax it really does help you create good-looking apps easily.
Building my own apps
I started to gain confidence with my Flutter skills and the tutorials through Paul Dichone on Udemy and The Net Ninja on Youtube were helpful resources that I dipped back into repeatedly as I worked to embed the learning.
I was able to create my Brewdog app that pulled in a list of the beers and their recipes through an open source API. My app would take this data and show a list of beer ‘cards’ alphabetically (or you could search by name) and clicking it would show a breakdown of the recipe and brewing methods. As a UI challenge to myself I tried to mimic the actual PDF page that Brewdog has created and is already well designed. I had a bottom navigation bar that included another tab/page which contained information on how to brew. This information was hard-coded into the app and I had got it from the internet through a rudimentary search. It was my first real app and it worked and I had it downloaded onto my phone so I could show people (screenshots anyway; we were still in lockdown). It wasn’t on the Play Store but you can install apps from APK files on Android and that’s the method that I used. It was a step or two before actually publishing on the Play Store and that was good enough for me.
I also stumbled across a guy called Andy Julow on Youtube who has created a few different tutorial series specifically for Flutter and is helpful enough to respond to comments on his videos too. In particular, he created a tutorial series on how to create a departure board. It focused on using the Provider package which is a very handy state management feature to learn and helps you pass data to components throughout your app. Following his tutorial I was able to build my own app that allows you to check departure boards for buses in Oxford, UK. The app allows you to choose a bus stop either by searching for a specific stop or choosing one from a list of bus routes. Then you can save bus stops into a favourite list or set one as your default homepage. It refreshes automatically every minute or you can manually refresh by pulling down on the screen. I am proud of this app and because it has real-world use I decided to go through the process of publishing to the Play Store.
I followed along the steps in the Udemy tutorial and set up all the necessary Google accounts I needed and paid the £20 or so developer fee. Lo and behold, there it is — my own app on Google’s Play Store. Although I published the app much later, I actually finished this app in May 2020 so it took me two months from learning from scratch to producing this app which is not too bad.
I had wanted to publish the app on Apple’s App Store too to see how the process works but I realised that you need a Mac in order to build your code into a package that can be accepted. That was really frustrating as I had assumed all I needed was Flutter in order to code for both platforms. Whilst that holds true, you do need a Mac in order to make apps for the App Store. There are ways around it but they seemed too complicated for me so I stuck with the Play Store. I still think it’s a great achievement to have an app on there that I built myself.
I came up with new ideas for projects and worked on those to continue learning but eventually I came to a cross-road. Apps are amazing but phone memory is a premium and I think many people are quite discerning over which apps they actually keep on their phone. In my opinion, people like apps because they seem to work well, are generally well designed and do the job without all the irrelevant extra that sometimes comes with a website. What if you could achieve that app-like feel through a modern-day website? I began to explore this idea more and more and that led me to React and Single Page Apps.
Part 1: What I managed in 12 months with no coding experience
Part 2: Getting to grips with Flutter
Part 3: Beyond mobile apps and into the web
Part 4: Building on my React foundation
Part 5: Components and classes and hooks, oh my!
Part 6: Next.js vs Create-React-App. (Undercard: Persistent Data)
Part 7: Headless WordPress, WooCommerce and Stripe
