www.fotia.com.my

Abdullah Fathi

FLUTTER
TRAINING

INTRODUCTION

What is Flutter?

A "tools" that allows you to build native cross-platform (IOS, Android) apps with one programming language and codebase 

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

flutter create <project name>

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