Flutter Training Document

Notes:
1. Make sure you understand the topic’s depth properly even if the linked resources
don’t cover it properly, you should be covering them properly. For example, the
linked directory structure video skips some directories, you are not supposed to
skip. Linked resources are only for help, not the golden rule of thumb for depth of
topics.
2. Your first day will start after setting up git on your machine.
3. You will revise the basics of networking, UI vs UX and mobile basics.
4. Then you will install flutter on your OS, and understand its basics.
5. On day four, you will build a simple flutter app. You can take this app and
continue adding all kinds of add-ons(appbar, bottom navigation bar etc.) for all
the topics you cover in the next few days. You can even decide to build some
other app for your learning along the way. But everything should be properly
practiced.
6. It will be assumed that all topics in the guide are done with hands-on practice. So
make sure this is done properly.
7. In standups, mention topics, not only the day numbers.
8. Keep sending the PR links in standups.

Before you begin - Network Basics:

1. If you are not comfortable with basic mobile concepts, or you didn’t had chance to take a
basic mobile development course in your university education, you can use the following
resources to learn the basics of web development concepts:
2. Mobile Application Development Explained (By IBM)
(Read the above article to understand how many ways there are to make mobile
applications, and resource allocation).

Day 0 (Setting Up Git):

Since your code is going to be reviewed by your buddy after the end of each day, you need to
set up Git on your machine.

1. What is a Version Control System?

2. What is Git? and get knowledge of some Git basics.
3. What is the purpose of the .git folder?
 4. Please make a GitHub account with your company email.
5. Make a private repo in your account, before starting the test project.
6. Give access to this repo to the buddy and training department (Username:
devsinc-training-coordinator).
7. You are supposed to follow strict guidelines around git and GitHub usage
and use proper branching for each piece of feature, and each branch will get
in master after it is reviewed and approved.
8. Get complete knowledge of the GitHub branching system.
9. Branch naming is very important as well, also don’t merge any PR without
getting it approved. If approvals are late, ping respected reviewers for
reviews.
10. Commit/PR size and messages are very important, should be descriptive,
and follow certain guidelines.
10.1. The subject line of the commit message should be descriptive but
short(<60-70 characters). And the subject line should clearly state
what is done in this commit.
10.2. Add a blank line after the subject line.
10.3. Then describe all changes in the commit 1 by one in bullet points.
10.4. Each bullet point may start with an asterisk(*) followed by a space.
This makes bullet points when pushed to GitHub or bitbucket etc.
10.5. Commit messages (bullet points) may include the subject and the
action that has been performed.
10.6. “<Subject>: <Action>”
10.7. E.g: * StoryBoard: Implemented view controller with custom UI
10.8. Commit size means how many code changes are in a commit, ideally,
each commit should only contain related changes to one feature/bug.
It’s easy to understand, review and test, and also makes it easy to
revert any changes if needed.
11. Part of using git properly is to review each committed change before you
commit them out. This means using git or any other tool to skim through all
the changes you have staged and see if any updates are needed(and usually
you will find maximum issues in this review, improving your PR quality).
12. Your PRs should be related to one feature only, don’t make huge PRs and
divide your work properly in the PRs.
13. Tag each PR for review properly, and add Junaid Rehmat and the training
department as collaborators in the reviewers' section when the PR is ready
for review.
14. Follow-up with reviewers for PR reviews.
14.1. Do a session with a buddy on git and Github usage, branch
naming, and other things before starting the work.
Day 1( Introduction To Mobile Application Development And
Installation Of Flutter):

Overview on Flutter
Flutter is a great tool from Google for creating cross-platform applications which – starting from
the newest stable version – can be deployed to the web, desktop, and mobile.
Google is promoting Flutter as a simple framework that allows us to create quality maintainable
solutions. Easy, it is just the next cross-platform framework.

Understanding The Architecture:

Introduction to Flutter - DEV Community

1. Must know: Presentation Layer (Difference Between UI and UX) , Security,Data

caching,Logging, Network Basics (Such as HTTP,SSL,UDP,TCP etc).
2. Good to know(above average): Details of how hybrid apps (cross platform applications)
differ from standard (iOS, Android) applications.
3. Understanding the Design Thinking Process.
4. Why UX is as important as UI in case of application development.
5. What are the Factors that influence UX.
6.
7. You should be comfortable with at-least these basics of mobile application
development before you begin proper training.

Day 2 (Installation Of Flutter)

Now, get your editor ready. We will be using Android Studio as our code Editor.

Once you have downloaded and installed android studio, it's time to install flutter on your OS.
Step1: Go to https://flutter.dev and click on the button “Get Started”.

Step2: Select the operating system. (In our case we will be using MAC).

To install and run Flutter, your development environment must meet these minimum
requirements:

● Operating Systems: macOS

● Disk Space: 2.8 GB (does not include disk space for IDE/tools).
● Tools: Flutter uses git for installation and upgrade.
 ● We recommend installing Xcode, which includes git, but you can also install git
separately.

Step3: Follow the steps as described in the fluter docs (follow all steps as mentioned in the
docs).

● Get the flutter SDK

● Run flutter doctor
● Update your path
● Install Xcode
● Create and run a simple Flutter app
● Deploy to iOS devices (incase you have a physical iOS device).

NOTE: This guide only shows what needs to be installed, if you face any issues, try to figure out
the fixes yourself as well and bring the issues up with the buddy.

Step4: At the end, you should be able to run a simple increment application on creating a new
project.

Step5: Start with the basics of Dart language and work your way up to flutter. For this follow the
following guidelines:
Flutter Mobile App Development | Learn Dart | Part 1 | Introduction | Variables | Dat…

This includes basic concepts such as making the first app,state,widgets, hot reloads, and the
famous widget of the week.

Day 3 (Intros And Know How’s,Level 2)

Learning Goals:
● Get familiar with the Components, Architecture and Widget Trees.
● Understand the difference between Stateless and Stateful Widgets.
● Understand why Scaffold is always used with MaterialApp
● Understand the properties of both Material App and Scaffold.
● How Scaffold renders AppBar and Body.

References: Scaffold class - material library - Dart API

MaterialApp class - material library - Dart API

Note: Do not try to remember anything. Just follow and understand their basics.
Follow this playlist and understand the basics of Flutter.

Welcome to Flutter

Understand the following:

1. Flutter basic history and philosophy know-how.
2. Go through the flutter github page, build basic know-how around it and read through any
interesting pages of flutter wiki.
3. Flutter directory structure (in depth, all folders covered or not in the linked video, find
and use other resources as needed for this understanding).

Day 4 (Intros And Know How’s,Level 3):

Learning Goals:
● Get familiar with the framework and its norms and build your first flutter app.
● Also set the tone for the depth and velocity needed in the rest of the timeline.

Content:

Basics:
Dive into the widgets catalog, and get your first flutter app up and running quickly. (make
a quick appbar, add a Scaffold in the MaterialApp).

Understand the following topics:

1. What is a widget?
2. Platform specific widgets (Android vs IOS)
3. What’s The Difference between Stateful and Stateless Widgets?

After creating your first application, now practice the following tasks:
1. Generating AppBar( Customizing color,title,back button,etc)
1. Appbar in Flutter.mp4

2. Generating Scaffolds,Rows and Columns

2. What is Scaffold, Column and Row and Styling in Text widget by giving color
,etc

4. What are Rows and Columns?

https://www.javatpoint.com/flutter-row-and-column

5. Understand the concept of child and children.

What Is The Difference Between Child And Children Property In Flutter
 6. What is a floating action button? Understand how a floating action button is
positioned.
1. Floating Action Button.mp4

7. What is a bottom sheet?

1. Bottom Sheet.mp4

Note: Only rows and columns can have multiple children.

Example:
● Children inside the column widget will be placed one below the other.
● Alignment can be done using the MainAxisAligment or CrossAxisAlignment.
● Children inside the row widget will be placed left to right.
● Alignment can be done using the MainAxisAlignment or CrossAxisAlignment.

See Resources: Basic Flutter layout concepts

Addition Resources:

Flutter Tutorial - 11 Understanding The Scaffold Widget

Flutter Tutorial for Beginners #11 - Rows
Flutter Tutorial for Beginners #12 - Columns

Day 5 ( Intros, know hows , level 4)

Learning Goals:
1. Get familiar with Images (file,assets and network) , understand how paddings column
and rows affect these widgets,wrapping a widget.
2. Understand the key tasks that are to be performed in a basic application.

Content:

Basics:
1. Understanding the bottom navigation bar (icon-list,colors,ontap,currentIndex etc).
1. Bottom Navigation Bar.mp4

2. BottomNavigationBarItem properties (icon,labels etc).

BottomNavigationBarItem class - widgets library - Dart API
 3. What is a ListView? Understand how it can be used inside a Column
ListView class - widgets library - Dart API

4. What is a single child scrollview?

SingleChildScrollView class - widgets library - Dart API

5. How does a single child scrollview +column differ from a ListView?

6. Wrapping a widget with another widget(Center,Row,Column,Padding,Widget etc).

Note: Understand the key differences between the two in terms of rendering the images.

Additional Flutter Resources:

BottomNavigationBar class - material library - Dart API

Day 6 (Intros, know hows, level 5)

Learning Goals:
1. Get familiar with some advanced topics.
2. Revise Images, BottomNavigationBar, SingleChildScrollView and Listview.
3. Understand the key tasks performed previously.
4. Git Training - Day 1

Content:

Basics:
1. Understand how to create a Form in Flutter. Practice how to create the basic structure of
a form and learn about submitting form data.
2. Explore the difference between a TextFormField and a TextField. Understand by
creating a form with two fields. Flutter: TextFormField Vs TextField | Flutter Agency
3. Learn how to create horizontal cards in Flutter. Learn more about layouts and built-in
widgets in Flutter. (Implementing code for a Horizontal Card).
4. Keep learning about built-in Flutter widgets. The documentation is always a good choice
to explore. Learn about different properties you can use and styles that you can apply.
Practice by building simple apps that use the built-in components to get familiar with
them.
5. Practice the following task:
a. Create a simple app bar which has the following items (an icon for drawer, a
profile image (use Image.network), and a username).
More:

1. Revise Concepts of Row, Column, Image, Container, SizedBox etc.

2. Explore adding widgets to stateless widgets: Packing a card into Widget and Stateless
Widget.
3. Explore how to add images in Flutter (Displaying images from the network).

Day 7 (Intros, know hows, level 6)

Learning Goals:
1. Get familiar with some advanced topics, and how to Navigation flows.
2. Get full hands on practice of UI in Flutter.
3. Create a dummy application for practice with initial routes defined and create navigation
flows among different screens.
4. Git Training - Day 2

Revise:
1. Revise all previous days topics(go through).
2. Revise the usage of Scaffold and Material App.
3. Revise Row, Column, and how to wrap a Widget.
4. Understand Container and SizedBox( What's the difference between them)

Content:
NOTE: If you are finding it difficult to grasp basic flows of flutter, or understanding how it works,
you can watch the following tutorial: Flutter Basic Training - 12 Minute Bootcamp

Basics:
1. Explore navigation between different screens using the Navigator class (Navigation to a
screen and back).
2. Navigation using named routes and setting routes in the main.dart file (Navigate with
named routes).
3. Passing arguments when navigating to a screen. Explore this in conjunction with named
routes (Passing arguments to a named route).
4. Sending data to a new screen when navigating (Passing data to a screen)
5. Returning data from a screen using the Navigator (Return data from a screen)
6. Explore Coupertino and Material page routes.
7. Practice exercise:
a. Create 2 screens and navigate between them using both named and ordinary
routes. Configure named routes in the main file and use them when navigating.
More:
1. Bottom Navigation Bar in Flutter - Programming Addict
2. BottomNavigationBar class - material library - Dart API
3. BottomNavigationBarItem class - widgets library - Dart API
4. Icons class - material library - Dart API

Day 8 (Intros, know hows, level 7)

Revise:
1. Revise all previous days topics (go through).
2. Revise the usage of Scaffold and Material App.
3. Revise Row, Column, and how to wrap a Widget.
4. Revise Container and SizedBox (What's the difference between them).
5. Revise Navigator(push, pop etc).
6. Revise Navigation between screens.
7. Git Training - Day 3

Content:

Basics:
1. Explore state management in Flutter - What is state? Why is it important to keep UI and
state in sync? (State management in Flutter Apps).
2. A look over at the state management solutions in Flutter. You don’t need to know them
all but have a look at the different libraries that you can use as a Flutter developer. List of
state management solutions - Flutter
3. Simple app state management in Flutter and the common techniques recommended for
beginners. (Simple State management in Flutter).
4. In particular have a look over at setState and how you can use it to add interactivity to
your Flutter apps via Stateful widgets (Using Stateful Widgets in Flutter)
5. Explore Change Notifier and Inherited Widget class. You should be familiar with
ChangeNotifier, ChangeNotifierProvider, Consumers, and MultiProvider and how to
use them to respond to data changes and update your UI dynamically.
6. Explore the Provider package for state management and how it abstracts
ChangeNotifiers. Explore the provider pattern for state management in Flutter.
7. Practice is key: Try to use these concepts to build simple applications like a counter app.

More:
1. Pragmatic State Management in Flutter (Google I/O'19)
2. Making sense of all those providers in Flutter
 3. Using Provider In Flutter | Peter Coding

Day 9 (Intros, know hows, level 8)

Revise:
1. Revise all previous days' topics (go through).
2. Revise the usage of Scaffold and Material App.
3. Revise Row, Column, and how to wrap a Widget.
4. Revise Container and SizedBox( What's the difference between them).
5. Revise Navigator(push, pop, etc).
6. Revise Navigation between screens.
7. Revise Provider (NotifyListeners, ChangeProvider, ChangeNotifierProvider, MultiProvider
etc)
8. Git Training - Day 4

Content:

Basics:
Explore hooks in Flutter (What are they and how they work in a Flutter application). Just a basic
knowledge is enough. (Using Hooks in Flutter).

Day 10 (Intros, know hows, level 9)

Revise:
1. Revise all previous days' topics(go through).
2. Revise the usage of Scaffold and Material App.
3. Revise Row, Column, and how to wrap a Widget.
4. Revise Container and SizedBox( What's the difference between them).
5. Revise Navigator(push,pop,etc).
6. Revise Navigation between screens.
7. Revise Provider (NotifyListeners,ChangeProvider,ChangeNotifierProvider,MultiProvider
etc)
8. Revise Hooks (useState and declaration).
9. Git Training - Day 5
Content:

Basics:
1. Getting started with Firebase and Flutter (Create Firebase project)
2. How to integrate Firebase with Android and iOS applications (Add Firebase to Flutter
app).
3. Authentication using Firebase and Flutter and authentication providers (Firebase Flutter
authentication) and the firebase_auth package.
4. User profile management in Firebase (Managing users in Firebase). Specifically, have a
look at how to update a user’s display name and email address when using Firebase
authentication.
5. Explore email and password for authentication in Flutter apps.
6. Explore Social Authentication for Flutter apps (In particular have a look over at Google
and Apple authentication).
7. As always get hands on practice by building a simple application that uses Firebase
authentication and logs in the user on successful authentication.

Resources:
1. Getting started with Firebase on Flutter - Firecasts
2. FlutterFire for Firebase in Flutter apps.
3. Getting started with Firebase and Flutter

Day 11 (Intros, know hows, level 10):

Revise:
1. Revise previous concepts (skim through)
2. Revise Firebase especially how to connect your android and iOS apps to Firebase
3. Have a look through Firebase authentication and using hooks in Flutter
4. Have a look at how to convert JSON data into Dart Objects

Content:

Basics:
Real-time database:
1. Saving data to a database using Firebase Firestore and firebase real-time databases.
2. Have a look at the difference between Firestore database and real-time database and
the tradeoffs of each (Choose a Database: Cloud Firestore or Realtime Database).
3. To get started with the real-time database, following is an excellent guide by the official
Firebase YouTube channel that’ll cover everything you need to start from connecting
your app to the database and fetching data
The Firebase Realtime Database and Flutter - Firecasts
 4. How to enable the real-time database in the firebase console and add the
firebase_database package to your pubspec file.
5. Explore how to fetch data from real-time databases using streams and using Futures.

Cloud Firestore:
1. How to enable the real-time database in the firebase console and add the
cloud_firestorepackage to your pubspec file.
2. CRUD operations using Cloud Firestore
Firestore CRUD in Flutter - A complete guide

NOTE: Many of the basic concepts are the same for both kinds of databases. A basic
understanding of fetching data with one will help you in learning the other.

More:
- How to perform queries in Cloud Firestore database
- Storing nested collections in Firestore
- Get data with Cloud Firestore

Day 12 (Intros, know hows, level 11):

Revise:
Revise Navigator (push, pop, etc).
Revise Navigation between screens.
Revise Provider (NotifyListeners, ChangeProvider, ChangeNotifierProvider, MultiProvider
etc.)
Revise Hooks (useState and declaration).
Revise Authentication/SignUp Using Firebase.

Content:

Basics:
1. Explore Firebase forgot password and how to reset user password (Manage Users in
Firebase)
2. Verification of user email address in Firebase (Authenticate with Firebase Using Email
Links)

Advance Bonus Section:

1. Look at how to integrate stripe with Flutter and Firebase using the flutter_stripe package.
2. Explore Firebase cloud functions.
3. What is Firebase Storage and how to use it in Flutter apps.
References:
Stripe payment using flutter_stripe and firebase cloud functions

Day 13 (Intros, know hows, level 12):

Revise:
Revise User management in Firebase
Revise user verification in Firebase

Content:

Basics:
3. Explore Firebase geo queries (Firebase Geo Queries)
4. Explore geo queries dependencies (Suggested)
Create an application to implement geo queries
Try searching for objects within a radius
Look into hashes created with geo objects

References:
Good resources to look into:
Realtime geolocation with google maps

Learning Outcomes:
By the end of this training document you should be able to understand the basics of flutter
(differences of Material App vs Scaffold), Row, Column, Container, SizedBox, Widget,
Functional Widget, Floating Action Button, BottomNavigationBar, Provider, Hooks, Firebase
Authentication, Firebase Storage/Realtime/Firestore, and Stripe Payment Integration.

Evaluation Criteria:
1. Go through project requirements document to see if use cases are properly covered

2. Report any kind of plagiarism if found in the test Project :

3. In cases of logins, emails for password reset should be configured properly :

4. Github account should be on the company email address :
5. For Git, proper branching should be done for each piece of feature. Branches should be

named properly :

6. Firebase should be setup for storing images and information:

7. PRs should be divided properly and Deployment should be be done :

8. Readme.md file should present and all assumptions should be listed :

9. External packages from pub.dev should be used as a last resort:

10. Codebase should be clean :

11. There should be no errors in the code base:

12. Routes should follow best practices & code should be extensible :
—----------------------------------------------------------------------------------------------------------------