www.fotia.com.my

Abdullah Fathi

FLUTTER
TRAINING

INTRODUCTION

What is Flutter?

SDK(Software Development Kit)

Tools to compile your code to native machine code + develop with ease

Re-usable UI building blocks (=widgets), utility functions, packages

Framework / Widget Library

Dart

Focused on frontend (mobile apps, web) user interface (UI) development

Object-oriented & Strongly Typed

Syntax is like a mixture of Java, Javascript, c#

Programming language developed by Google

Flutter Architecture

UI as code: build a widget tree

Embrace platform differences

One Codebase

Everything's a Widget

Flutter Setup

Flutter  (Windows)

Get Started

Update Flutter PATH

• User Variables -> Path
• <path to flutter folder>\bin

Install Android Studio

• Makesure to choose "Android Virutal Device"
• "Android Studio Setup Wizard" -> Custom -> Choose AVD

External Android  SDK

• Open Environment Variables
• User Variable -> new
• name: ANDROID_HOME
• value: <PATH TO ANDROID SDK>
• Edit Path
• %ANDROID_HOME%\tools
• %ANDROID_HOME%\platform-tools

IDE (VISUAL STUDIO CODE)

Install VSC Extension

flutter

Material Design

• Material is a Design System created (and heavily used) by Google
• Highly customizable (works on IOS devices, too)
• Material Design is built into Flutter but you also find Apple-styled (Cupertino) widgets

Flutter vs React Native vs Ionic

Javascript / React.js

Dart + Flutter

React Native

Flutter

Ionic

Javascript (Any or no Framework)

WebView-hosted Web Apps

Compiled Native Apps

Partly compiled (UI Components) Native Apps

Does compile to IOS / Android UI Components

Does not compile to IOS / Android UI Components

Does not compile to IOS / Android UI Components

Developed by Ionic

Developed by Google

Developed by Facebook

Flutter Basics

Building a quiz app (hands-on training)

Create New Project

Create Android Emulator

1. Open Android Studio
2. Choose "Open an existing android project"
3. Tools -> AVD Manager
4. Create/Choose Virtual Device
   1. Choose hardware with playstore feature
   2. Choose latest stable system image

Run Project

• Using Terminal: flutter run
• Using VSC: Start Debugging / Start without debugging (a bit faster)

Overview Generated Files and Folder

• .idea: Hold some configuration for Android Studio
• android: Hold a complete Android project 
• build: Hold the output of Flutter application
• ios: Hold a complete IOS project
• lib: Important folder. All of our dart code/file will be in here
• test: Allow us to write a test for our application, automated test, etc
• pubspec.yaml: Allos us to manage dependency of project

Dart Basics

Data Types

• String => "Hello" or 'Hello' => Text
• int => 20 or -54 => Numbers without decimal
• double => -3.99 or 85.9421 => Numbers WITH decimal places
• num => the 'parent type' of double and int

Class Constructor

Building a Widget Tree

Different Types of Widgets

Output & Input (Visible)

Layout & Control (Invisible)

RaisedButton(), Text(), Card(), ...

Drawn ont the screen:"What the user sees"

Row(), Column(), ListView(), ...

Give your app structure and control how visible widgets are drown onto the screen (indirectly visible)

Container()

Adding Layout Widgets

Connecting Functions & Buttons

Anonymous Functions

Updating Widget Data

What is "State"?

State is Data/Information used by your app

In General

App State

Authenticated Users
Loaded Jobs
...

Current User Input
Is a Loading Spinner being shown?
...

Widget State

Stateless vs Stateful

Input Data

Stateful

Stateless

Widget

Renders UI

Data can change (externally)

Gets (re)-rendered when input Data changes

Renders UI

Widget

Input Data

Internal State

Data can change (externally)

Gets (re)-rendered when input Data or local State changes

Private Properties

Create New Custom Widget

The Container()

child (=Content)

Padding

Border

Margin

Container

Enums & Multiple Constructor

Passing callback functions around

MAP

Final VS Const

"if" Statements

Splitting App into Widgets

Getters & "else-if"

Running apps on different devices & debugging apps

Devices
&
Debugging

Running App on Android Device

Working with Emulators

Error Messages
&
Fixing Errors

Debugger

Dart DevTools

Repaint Rainbow

Build a Real App

Widgets, Styling, Adding Logic

Most Important Widgets

Details

Most Important Widgets

Details

Most Important Widgets

Most Important Widgets

Details

Columns & Rows

Column & Row

Alignment

Flexible & Expanded

Flexible & Expanded

Container vs
Column / Row

ListView

There are no secrets to success. It is the result of preparation, hard work, and learning from failure. - Colin Powell

THANK YOU

Presentation Slide