Created by Mitch Koko

FLUTTER BEGINNER HANDBOOK

For Complete Beginners with No Coding Experience
 0
Introduction

1
Programming Fundamentals

2
Everything is a Widget

3
Navigation

4
User Interaction

5
Backend

6
Frontend
 0
introduction
Why did i write this book?
This is a book I wish I had when I first started learning Flutter. I
will condense everything that I believe is essential into this guide
so that you can go off and create amazing apps yourself. My
learning philosophy is to make everything simple. Coding
software applications can get very complex and there are many
branches of development that can seem almost endless,
especially if you’re just starting out. My goal with this book is to
give a beginner enough of a foundation for you to build on from
this little toolbox.
what is flutter?
You want to make mobile apps, but you are faced with a decision:
Should I learn iOS or Android development? Do I have to commit
to one or the other? This is the major decision I had to make when
I was starting out. I had initially started making Android apps,
but very quickly I didn’t like the fact that I was limited to just one
platform. I wanted to make mobile apps that everyone can use.
How does everyone else handle this problem? It seemed like at
the time, you had to choose one platform as your main. This is
probably why most of the apps you use today are made by big
companies who have the funds to hire an entire iOS team, an
entire Android team and manage the two teams to attempt to
create a seamless experience for the end user. That’s a lot of
work, money, and people!

Then I found Flutter. There are other cross-platform solutions

out there but once I started using Flutter, I never looked back.
The amazing developer experience and the ease to which an
individual can make beautiful apps was too good. Naval says that
the information age is reversing the industrial age and we will all
go back to working for ourselves. I really believe this to be true.
general tips before we start
You have the entire internet at your fingertips. If you come
across something that you don't understand, the act of
formulating the question and searching for the answer is how we
learn.

What's more important than reading this book, is for you to

actually sit infront of a computer and code. There are many little
nuances that are difficult to learn just by reading. We learn best
by doing.

I designed this book for complete beginners in mind, but the only
pre-requisite is for you to have installed Flutter on your computer
and are able to run the default app when you open a new project.

If you have done that, then let's start from the very beginning!
 1
programming basics
 basics
variables

operators

control flow

functions

data structures
list

set

map
 variables
You can store different types of information into variables. There
are several variable types you should know about.
 string
A string of characters, ie. text

int
Integers / numbers without a decimal point

double
Numbers with a decimal point

bool
Boolean value / either true or false
 operators
Now that you can store information into variables, you can
change, compare, and perform logic on them.
basic math operators
COMPARISON OPERATORS
LOGICAL OPERATORS
 control flow
It's time to give instructions to the computer about how you want
things to be done.
if
if else
else if
If you find yourself using too many if statements, you may want
to consider using a switch statement
switch case
Imagine you have a box of ten different colored crayons and you
want to draw a small circle with each one. Instead of saying,

"Draw a circle with the first crayon, then draw a circle with the
second crayon, then draw a circle with the third crayon, etc..."

for all ten crayons.. it's much easier to say,

"For each crayon in the box, draw a small circle."

There will be situations where you want to repeat a block of code

easily. Loops are an essential and fundamental concept in coding.
 for loop
You will need 3 requirements to construct a for loop:
initialization, condition, iteration
 break
The 'break' statement is used to break out of a control flow before
it finishes naturally
 continue
Instead of breaking out of the entire loop, you can also just skip
the current iteration and continue on with the rest of the loop
 while loop
In a for loop, you have to specify the number of times to loop. If
you don't know how many times to loop, you can use a while loop
to keep looping until until a certain condition is met
 functions
We just looked at some cool blocks of code that gets things done.
We can organise these blocks of code into functions so that we
can reuse them easily.
 create a function
Here's a simple function that greets the user.

'void' means that this function returns nothing. Shortly we will

look at functions that do return something. This one for now just
executes the code in the function.
 call the function
Every app starts at the main function by default. So let's call our
greet() function.
Output:
 parameters
You can also accept an input from the user.
 call the function
Now when we call the function, we have to give it the required
parameter.
Output:
The functions we looked at so far had a return type of 'void'.
(executes the code and returns nothing)

Here is an example of a function that has a return type.

(executes the code and returns something)
 function with return type
In this case, our function requires 2 parameters and will return
the sum.

It will execute the code in the body like usual but now it returns
something, in this case, an integer.
 call the function
Since our 'add' function returns an integer, we need to store that
value somehow. Let's store it in a new integer variable called
'result'.
 data structures
There are different ways to store data. Here are the essential
ones.
 list
These are ordered groups of items. In Dart, lists are analogous to
arrays in other languages.
 set
These are unordered groups of unique items. Sets are useful when
you want to ensure that an item only appears once.
 map
These store data in key-value pairs.
 2
everything is a widget
In Flutter, a widget is a fundamental building block of the app.

Widgets are organized into a hierarchical tree.

Here are the essential widgets.

 scaffold
This is the skeleton of your app

You can give a widget to each section of the scaffold

 container
A container is a versatile widget that you can give a size, color,
and child to.
The child looks way too close to the edge though..
Lets give it some padding
 Not bad

There are many ways to decorate a container

One thing I love to decorate is curving the corners
 Looks pretty good

The text looks so small though, you can barely read it!
 text
You can change the text's size, weight, color and more
 icon
Flutter has a big library of icons by default
 app bar
The 3 essentials here are the title, color, and leading icon
 column / row
You can group widgets together vertically / horizontally
You can align the children in different ways
You can align the main axis to the center
Or.. you can align the main axis to the end
Lets say one of the children is bigger
This is where the cross axis comes into play
You can align the children on the cross axis
 expanded
The expanded widget goes very well with columns / rows because
it will automatically expand the widget to fill the remaining
space
One problem with columns / rows.. Sometimes, not all of it's
children fit on the screen!
For this, we need another widget
 listview
Listviews are like columns / rows that can scroll
All of the children now fit because this list is scrollable
listview.builder
You can generate lists on demand like this
gridview.builder
You can create grids on demand like this
 stack
A stack, like the name suggests, stacks widgets on top of each
other
Like columns / rows, stacks also have alignment properties
 gesture detector
This widget allows it's child to be tappable by the user. Here are a
few of the main gestures
 3
navigation
 routes
In your material app, you can define the routes to the different
screens
 1st screen
This is our first screen, it has a button in the center that when
pressed, sends us to the second screen
 2nd screen
This is our second screen. We just used 'push' to go to a new
screen, now you can use 'pop' to go back.
 drawer
A drawer widget is a common way to organise a list of pages a
user can navigate to
You can open the drawer by tapping on the menu icon

Lets decorate our drawer now

 bottom nav bar
A bottom nav bar is another common way to navigate
Now lets setup the navigation part
 In the body of the scaffold, lets give it the pages we want to
display.

When the user taps on the bottom nav bar, we want to navigate
to the correct page.
 Lets keep track of which page to display using the integer
_selectedIndex

In our case, we have 3 pages so our _selectedIndex can be either

0, 1, 2
 4
user input
 counter app
This is the default app that you see when you open a new Flutter
project
The 3 main elements here:
variable / method / UI
When the user presses the button, it calls the _incrementCounter
method, which updates the _counter value and rebuilds the
widget by calling setstate().
 textfield
Use this widget to get text input from the user

I like having an outline border

Once the user typed something in the textfield, lets collect it
 Create a text editing controller

Give the controller to the textfield

Now you can store what the user typed into a variable
 5
backend
offline vs online
You can store data either offline or online. When it comes to
offline storage, there are many great options for Flutter, namely
Hive & Isar. I will show you the basics of Hive.

When it comes to online databases, there are a multitude of

options and there is no single solution that is the best. It just
depends on your situation. A very common one is Firebase due to
it's ease of use and getting started. There are other popular ones
like Supabase, Appwrite, MongoDB, etc which can scale better.

Each of these solutions have their own documentation so it is up

to you to explore and decide which one is suitable for your needs.
If you are interested in a more detailed tutorial you can check out
my tutorials at youtube.com/mitchkoko where I show you how to
set up Firebase and also make projects like a social media app, a
chat messaging app, and more.
 local storage / hive
Lets save our data to our local device storage. Add this package
to your pubspec.yaml file
Set up the hive database in the main function
It works using a key : value pairing. Below we are using the
number 1 for the key.
 build apps with hive
If you want to see me build an entire app from scratch using Hive,
you can watch tutorials at youtube.com/mitchkoko where I made:

To Do app

Habit Tracker app

Notes app

Expense Tracker app

build apps with firebase
If you want to see me build an entire app from scratch you can
watch tutorials at youtube.com/mitchkoko where I made:

Social Media app

Chat Messenger app

Login app
 6
frontend / design
"Design is not how something looks, it's how something works."

- Steve Jobs -
 simple is beautiful
An amateur mistake is to want to jam pack as many features as
possible into the app since more = better .. right?

NO! It shows a lack of focus and clarity about what the identity of
the app is. The user should know immediately what the app is
about without needing a manual or an explanation on how to use
it. This means the design needs to be intuitive.
Think about this..
How can you remove as much as possible while still leaving the
core identity?
Before you try to make your app look pretty on the eye, you first
need to do some soul searching about what the app is for.

What is the ONE THING the user should do one your app?

You need to look inward before you look outward.

 color
Color is the fundamental makeup of your app's identity
When you think of Twitter, you think of sky blue.
When you think of Facebook, you think of blue.
When you think of Youtube, you think of red.
When you think of Spotify, you think of green & black.

This doesn't just apply to apps. It applies to any brand, even

countries.

When you think of Lakers, you think of purple & gold.

When you think of Argentina, you think of light blue & white.
Which color best represents your app?
 I don't like strict rules but a general tip I have is to use as few
colors as possible. If you are going to add a new different color to
your palette, it better represent an integral aspect of your apps
identity.

Instead of using multiple colors pick one main color and use
different shades of that color. It will create an overall vibe and
feeling.
what are you going to
build?