#4WeeksofFlutter: Let’s Learn Flutter!

Coding is an overwhelming experience. For a year now, I have been trying to find my niche in the tech Industry. I started by learning Java, because I have a background of it from University. However, Java felt overwhelming to me and I decided to learn web development, seeing that it looks promising and the resources for learning it was in abundance, thanks to the large tech community on Twitter.

I started by learning Html which I would describe as easy, then I moved on to CSS which is fun. I got contented with my CSS skills and decided to move on to JavaScript. It was interesting initially because it has the same fundamentals as other programming languages, but practicing it got overwhelming with time so I decided to take a month’s break(which turned out to be 8 months, Lol). I started learning Git and Github to an extent, and then I moved on to Digital marketing. Consequently, I came across an article on Flutter vs React Native and decided to go for Flutter. I have always loved mobile development and I want to make it my niche this time around. Now let’s go back to business.

Flutter is a software development kit, which uses DART programming language to develop cross-platform mobile applications (Android and iOS) with a single codebase. Flutter was developed by Google in 2017 and it got popular in 2019.

I searched Youtube and found a roadmap for learning flutter. I found a channel, AppMaking.co and went through the Introduction to Flutter. With the help of that channel, I installed the latest version of Android studio, Visual studio code and Git. In Android Studio, I installed the Flutter plugin. I also installed the Flutter plugin in my Visual studio code. I then downloaded the Github desktop because I love using it for Git. After that, I ran the Flutter doctor command in my command prompt to ensure that my installations are all intact. Next, I tried setting up a virtual device in my Android studio. However, I could not use the emulator because haxm(virtualization) was not installed in my computer. I’m still trying to enable the virtualization on my computer.

Next, I moved on to use Visual studio code for my coding, with a physical device running on chrome due to the haxm problem I’m having with Android studio. I created a flutter folder and run it on Visual studio code terminal.

After the Installation shenanigan, I began learning from Appmaking.co. I learnt the Basic Flutter commands, Run app on device commands, and the Debugging commands. Furthermore, I looked through the syntax of the main.dart file. I learnt what the device structure looks like; from the Scaffold, to the appBar, the body and the bottom navigation bar.

Next, I went through the basic widget components in Flutter. Every widget has a property. These widgets include; Text, Container, Child, Row, Column, Center, Stack, Image, Padding, SizedBox, ConstrainedBox, Align, Baseline Class, Transform and Aspect Ratio. I learnt this carefully, including their syntax, properties and how to implement them. I then created a simple 3-way container that contains row and column properties, including other widgets. I also learnt that in order to display my work, I have to save the code and ‘hot reload’. Hot reload happens when you type the letter r in the terminal and the compiler compiles everything from the code base.

I took a further step to learn the Stateful and Stateless widget. The Stateful widget is like a container that stores code that handles network requests, clicks, API and all technical matters, while the Stateless widget is like a container that has all matters concerning user Interface(UI) & Display. The Next thing I learnt was Gestures; The Pointers, Tap, DoubeTap, LongPress, GestureDetector, Vertical drag, Horizontal drag, Pan and Callback functions. These are all gestures that could happen as a result of mouse clicks. I recreated a bulb app and then created simple picture switching app. I could switch to the next picture and back.

I went on to learn about Buttons including TextButton, ElevatedButton, OutlineButton, FloatingButton, Icons and how to style them. I also learnt some Introduction to Dart programming language Syntax. Additionally, using Vandad’s tutorial videos I learnt the Navigation components, which include; Scaffold, AppBar, BottomNavigationBar, TabBarView, Drawer and SliverAppBar. I also learnt the differences between backgroundColor, Color, FixedColor, TextTheme and HighlightColor. Afterwards, I joined Appmaking.co in creating a Quiz App. I commit everything I do to github desktop and then fetch it to the local origin.

I spent five (5) days learning these. About 3-4 hours each day from Monday to Friday, and revise for 30 minutes on Saturday. I want to assimilate flutter bit by bit, so that it doesn’t end like I did with JavaScript. BurnOut is real; I don’t want to experience it again.

Thank you for reading. See you next week. xx.