Leaf: Flutter Social Media App — Part 0

5 min readNov 21, 2019

Hello, good people! Hope you’re having a wonderful day! I’ve recently decided to get into the world of writing tutorials. I want to write about something I’m extremely passionate about. I’ve been using Flutter for a while and really like using it. So, I’ve decided to write about it.

Flutter?

What is it?

Flutter is Google’s UI framework to build cross platform applications. Meaning, you can develop applications for multiple platforms using a single code base. The stable version of flutter released in December of 2018.

Why to care about Flutter?

Developed and backed by Google, the tech giant behind android OS.
Although it has been out for little over a year, the flutter community has been growing rapidly. More and more people are trying it out and absolutely loving it. According to LinkedIn, it is the number one most sought skill in 2019.
Dart, the language Flutter is written in, compiles directly to native code. For Android it compiles to java, for iOS objective C and for web JavaScript.
Here’s an amazing article written by Wm Leler that explains why Flutter uses Dart.
Hot reload feature. Watch your modified code take effect as soon as you hit save. An extremely useful feature when you’re designing app UI, as you can see what effect your code is having in real time.
Develop apps for multiple platforms using a single code base.

My history with Flutter

I started learning flutter back in December of 2018. I’ve have been using it for mobile application development ever since. It’s been a rocky journey for me if I’m being entirely honest. I didn’t follow any specific tutorials or took any course on it. (Flutter version 1.0 came out in December 2018. So there weren’t that many structured courses to begin with.) So, I read articles and documentation to learn about the framework. Built some small projects to get hands on learning experience.
Honestly though, it’s been great. Flutter is fun to use. Easy to learn. It has spoiled me to the point that I now don’t even want to do native app development anymore.

Introducing the series

My intentions

In this blog series, I’ll write articles about how I’m developing an app called Leaf. Whenever I sit down to develop the application, I shall write an accompanying post to clarify what I’m doing and why. There are a couple of reasons as to why I’m doing this

Building an application from scratch using Flutter will help people get a good grasp of how it is used. So, people can more easily learn it by doing.
Explaining requires understanding first. I’ve been using Flutter for over a year. So, I want to take this opportunity to challenge my understanding of this framework. If I am unable to explain it well, that means I don’t understand it well enough myself. So, I’ll have to study up on topics to write each article. This will further my knowledge on the topic.

The topics I wish to cover

Basics of flutter
Firebase cloud services
Animation using flutter
State management using Bloc pattern
Asynchronous programming using Futures and Streams
Testing in Flutter

With all my intents and purposes out of the way let me now give a short introduction about the app which I will be building.

Leaf: Social Media App

Basic idea

I will develop a mobile application, called Leaf, using flutter completely from scratch. Leaf will be a simple social media application. It’s going to be an app for plant lovers. Using it people can share thoughts about plants and interact with each other. The features I have planned to include are:

User authentication.
Writing posts with image attachments.
Becoming followers of other users.
Reacting and commenting on posts.
Notification about latest posts from followed users.
Searching for specific posts.

Basic Design

Advice to beginners

Learning something new can be overwhelming at first. Don’t worry. It’s the same for everyone.

I’ll be heavily hyperlinking documentation and articles for further reading in all my posts to aid you.

The documentation can seem very confusing if not entirely frightening. There will be a lot of things you won’t understand and that’s OK.

Even I don’t understand most of the stuff the documentation refers to. Don’t worry about it too much. You’ll learn as you go on. Here’s my advice on how to tackle the learning process:

Code along. Read about the explanations I give or refer to additional resources if you want to.
If you understand that’s great. Then play with different parameters to see what happens. You’ll quickly understand what a widget is for and how to use it.
If you don’t understand then try to go slow and re-read the explanations. If it doesn’t work then ask for help. The community is great. People will almost always extend a helping hand. Start discussions here or anywhere and you’ll find answers very quickly.
If you’re still feel bothered by something, then try to note it down and move on. Along the line you’ll come across it again. And the knowledge you’ll build along the way will aid you to understand it. Sometimes you need to learn other things to get a good grasp of something else.

Prerequisite knowledge

The series will be for flutter beginners. But some prerequisite knowledge is mandatory to understand what is happening in the code. These prerequisites are:

Basic programming knowledge
A) Variables and Data types
B) Conditional statements like if-else and switch
C) Looping using for, while statements
D) Enumerators
E) Functions and their parameters, arguments and return types
F) Arrays both single and multi-dimensional
Object Oriented Programming knowledge
A) Classes and objects
B) Inheritance
C) Abstract classes
D) Extending and implementing classes
Dart language. You don’t need to know everything about dart. Just follow this overview to get acquainted with the language. The following are enough:
A) Variable and data types
B) Functions and different types of parameters
C) Maps and Lists
D) Enumerators
E) Classes