Exam Code: AFD - 200

Flutter Application
Development

• Covers a wide range of flutter development topics.

• Demonstrates visual, behavioral and motion rich Flutter widgets.
• Displays step-by-step lab exercises to built flutter apps.
• Includes guides to build Google Maps apps.
• Presents Android and iOS app publishing guidelines.

By Android ATC Team www.androidatc.com

FlutterTM Application Development AFD-200

Android ATC

FlutterTM Application Development

Exam Code: AFD-200

Hands-on Guide to Flutter Development

i
 FlutterTM Application Development

Course Outline

Lesson 1: introduction to Flutter and Dart Programming Language

Introduction ........................................................................................................................... 1-2
Importance of Flutter........................................................................................................... 1-2
Introduction to Dart............................................................................................................... 1-3
Writing Dart code .................................................................................................................. 1-3
DartPad.................................................................................................................................. 1-4
Installing Dart SDK................................................................................................................ 1-4
IntelliJ IDEA .......................................................................................................................... 1-10
Lab 1: Installing Dart IDE and Writing Dart Program .......................................................... 1-12
Installing IntelliJ IDEA...................................................................................................... 1-13
Creating a Dart Project Using IntelliJ IDEA..................................................................... 1-25
Using DartPad .................................................................................................................. 1-29

Lesson 2: Dart Programming - Syntax

Introduction ........................................................................................................................... 2-2
main( ) function..................................................................................................................... 2-2
Dart Variables........................................................................................................................ 2-4
Dart Data Types ..................................................................................................................... 2-5
Input of Information to Dart Program .................................................................................. 2-15
Writing Comments ................................................................................................................ 2-17
Dart Conditional Operators................................................................................................... 2-19
If Statement........................................................................................................................... 2-22
If – Else Statement ............................................................................................................... 2-24
If…Else and Else…If... Statement ......................................................................................... 2-25
If Else and Logical Operators ............................................................................................... 2-26
For Loops............................................................................................................................... 2-28
While Loops ........................................................................................................................... 2-29
Do-while Loops ..................................................................................................................... 2-31
Break Statement ................................................................................................................... 2-32
Switch Case Statement ........................................................................................................ 2-33
Lab 2: Create a Pizza Order Program................................................................................... 2-36

vi
FlutterTM Application Development AFD-200

Lesson 3: Dart Functions & Object-Oriented Programming (OOP)

Functions............................................................................................................................... 3-2
Function Structure ........................................................................................................... 3-2
Creating a Function.......................................................................................................... 3-2
Function Return Data Types ............................................................................................ 3-4
Void Function ................................................................................................................... 3-7
Function Returning Expression ....................................................................................... 3-9
Functions and Variable Scope......................................................................................... 3-10
Object-Oriented Programming (OOP) .................................................................................. 3-12
Object................................................................................................................................ 3-12
Class ................................................................................................................................. 3-13
Creating a Class ............................................................................................................... 3-13
Adding Methods to Classes............................................................................................. 3-18
Providing Constructors for Your Classes........................................................................ 3-19
Class — Getters and Setters ............................................................................................ 3-25
Class Inheritance.............................................................................................................. 3-27
Abstract Class .................................................................................................................. 3-28
Dart Project Structure and Dart Libraries ............................................................................ 3-33
Lab 3: Create a Small Overtime Payment Program ............................................................ 3-40

Lesson 4: introduction to Flutter

Understanding Flutter........................................................................................................... 4-2
Flutter Framework................................................................................................................. 4-4
Android Studio ...................................................................................................................... 4-5
What is Android Studio? .................................................................................................. 4-5
Android Studio Software Prerequisite............................................................................. 4-5
Installing Android Studio ................................................................................................. 4-8
Flutter SDK ............................................................................................................................ 4-14
Installing and Configuring Flutter SDK ................................................................................ 4-14
Creating a New Flutter Project ............................................................................................. 4-20
Setup an Android Virtual Device .......................................................................................... 4-24
Run a Flutter App .................................................................................................................. 4-30
Installing Flutter on Mac....................................................................................................... 4-36
Test Your Flutter App on iOS Phone with Windows O.S ..................................................... 4-37
Android Studio Sugar and Spice .......................................................................................... 4-45
Run your Apps on a Hardware Device (Physical Phone) .................................................... 4-51
Run your Flutter App on Android Phone ......................................................................... 4-52

vii
 FlutterTM Application Development

Run your Flutter App on IPhone Device .......................................................................... 4-56

Emulator Debug Mode .......................................................................................................... 4-56
Introduction to Flutter Widgets............................................................................................ 4-57
Creating a Flutter App Using Widgets ................................................................................. 4-59
What is a MaterialApp widget?............................................................................................. 4-64
Lab 4: Creating a Simple Flutter App ................................................................................... 4-66

Lesson 5: Flutter Widgets Fundamentals

Scaffold Widget..................................................................................................................... 5-2
Image Widget ........................................................................................................................ 5-8
Container Widget .................................................................................................................. 5-15
Column and Row Widgets .................................................................................................... 5-24
Icon Widget............................................................................................................................ 5-29
Layouts in Flutter .................................................................................................................. 5-31
Card Widget ........................................................................................................................... 5-42
App Icons for iOS and Android Apps.................................................................................... 5-46
Hot Reload and Hot Restart ................................................................................................. 5-50
Stateful and Stateless Widgets............................................................................................ 5-55
Use a Custom Font................................................................................................................ 5-64
Lab: Creating a Restaurant Menu ........................................................................................ 5-69

Lesson 6: Navigation and Routing

Button Widget ....................................................................................................................... 6-2
FloatingActionButton....................................................................................................... 6-2
RaisedButton, FlatButton, and IconButton..................................................................... 6-6
DropdownButton .............................................................................................................. 6-8
OutlineButton ................................................................................................................... 6-13
ButtonBar.......................................................................................................................... 6-14
PopupMenuButton ........................................................................................................... 6-17
App Structure and Navigation .............................................................................................. 6-21
Navigate to a New Screen and Back .................................................................................... 6-21
Navigate with Named Routes............................................................................................... 6-29
Send and Return Data Among Screens ............................................................................... 6-34
Animate a Widget Across Screens....................................................................................... 6-36
WebView Widget in Flutter ................................................................................................... 6-40
Lab 6: Navigation and Routing a Pizza Store App .............................................................. 6-45

viii
FlutterTM Application Development AFD-200

Lesson 7: visual, Behavioral, and Motion-Rich Widgets implementing

Material Design Guidelines - Part 1
Introduction ........................................................................................................................... 7-2
BottomNavigatorBar Widget ................................................................................................ 7-2
DefaultTabController, TabBar, and TabBarView Widgets .................................................... 7-5
ListTile Widget ...................................................................................................................... 7-11
ListView Widget .................................................................................................................... 7-15
Drawer Widget ....................................................................................................................... 7-18
DataTable Widget .................................................................................................................. 7-29
SelectableText Widget .......................................................................................................... 7-32
Stack Widget ......................................................................................................................... 7-35
Lab : 7 .................................................................................................................................... 7-39
Lab A: Creating a Flutter App using BottomNavigatorBar Navigation Technique.............. 7-40
Lab B: Using DataTable Sorting Built-in function................................................................. 7-45

Lesson 8: visual, Behavioral, and Motion-Rich Widgets implementing

Material Design Guidelines - Part 2
Input and Selections
Text Field Widget.............................................................................................................. 8-2
CheckboxGroup and RadioButtonGroup Widgets .......................................................... 8-11
Date Picker........................................................................................................................ 8-17
Time Picker. ...................................................................................................................... 8-23
Slider Widget. ................................................................................................................... 8-25
Switch Widget................................................................................................................... 8-29
Dialogs, Alerts, and Panels
Alert Dialog Widget........................................................................................................... 8-32
Cupertino Alert Dialog Widget. ........................................................................................ 8-35
Bottom Sheet.................................................................................................................... 8-36
Modal Bottom Sheet............................................................................................... 8-36
Persistent Bottom Sheet........................................................................................ 8-41
Expansion Panel Widget. ................................................................................................. 8-49
Snack Bar Widget. ............................................................................................................ 8-54
Lab 8: Creating a Hotel Reservation App............................................................................. 8-60

ix
 FlutterTM Application Development

Lesson 9: Firebase
Introduction ........................................................................................................................... 9-2
What is the JSON ? ............................................................................................................... 9-3
How does Firebase Database work? .................................................................................... 9-4
Firebase authentication (Signup and Login to Flutter App) ............................................... 9-5
Configure Your App to use Firebase Services ..................................................................... 9-17
Adding Firebase to your Android App ............................................................................. 9-19
Adding Firebase to your iOS App .................................................................................... 9-26
Configuring Firebase Authentication................................................................................... 9-33
Login to an App Using Firebase User Accounts............................................................. 9-46
Logout Configuration ....................................................................................................... 9-48
Firebase Database ................................................................................................................ 9-53
Which database is right for your project?....................................................................... 9-53
Real Time Database ...................................... .................................................................. 9-54
Cloud Firestore .............................................. .................................................................. 9-63
Lab 9 : Create a User Profile Interface using Firebase ....................................................... 9-72

Lesson 10: Location-Aware Apps: Using GPS and Google Maps

Introduction ........................................................................................................................... 10-2
What is GPS and how does it work? .................................................................................... 10-2
The Camera Position............................................................................................................. 10-4
Adding Google Maps to a Flutter app .................................................................................. 10-5
Getting a Google API key ................................................................................................. 10-6
Adding Google Maps Flutter plug-in as a dependency .................................................. 10-11
Adding your API key for your Android app ...................................................................... 10-12
Adding your API key for your iOS app ............................................................................. 10-13
Adding a Google Map on Your Flutter App Screen......................................................... 10-14
Adding a Google Map Marker .......................................................................................... 10-18
Google Map Types............................................................................................................ 10-21
Moving the Camera (Camera Animation) ....................................................................... 10-23
Capturing an App User’s Location for iOS and Android Apps........................................ 10-26
Lab10: Location-Aware Apps Using GPS and Google Maps .............................................. 10-27
Getting a Google API key ................................................................................................. 10-28
Creating an App Interface................................................................................................ 10-33
Configuring your App to Use Your API Key ..................................................................... 10-34
Adding a Google Map on your Flutter App Screen ......................................................... 10-36
Adding a Google Map Marker .......................................................................................... 10-38

x
FlutterTM Application Development AFD-200

Capturing Users’ Location ............................................................................................... 10-39

Configuring User App’s Permission................................................................................. 10-41

Lesson 11: App Testing & Publishing

Testing and Feedback for Your App ..................................................................................... 11-2
Setting up a Test Environment ........................................................................................ 11-6
Usability Testing by Participants .................................................................................... 11-7
Starting your Test Session .............................................................................................. 11-8
Analyzing your Test.......................................................................................................... 11-10
Publishing Flutter Apps ........................................................................................................ 11-10
Publishing Android App on Google Play Store.................................................................... 11-17
Publishing iOS app on Apple Store ...................................................................................... 11-32

To order this e-Book, go to: https://androidatc.com/pages/Eng/Self-Study

xi