Abdullah Fathi
FLUTTER
TRAINING
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928048/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928056/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928078/pasted-from-clipboard.png)
UI as code: build a widget tree
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928080/pasted-from-clipboard.png)
Embrace platform differences
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928086/pasted-from-clipboard.png)
One Codebase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928089/q0m1c1s77u7uky4zwh2m.gif)
Everything's a Widget
Flutter Setup
Flutter (Windows)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/5112946/vsc.gif)
Install VSC Extension
flutter
Material Design
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6928222/pasted-from-clipboard.png)
- 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
- Open Android Studio
- Choose "Open an existing android project"
- Tools -> AVD Manager
- Create/Choose Virtual Device
- Choose hardware with playstore feature
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938364/fluuter-widget01_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938369/fluuter-widget02_.png)
Details
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938371/fluuter-widget03_.png)
Most Important Widgets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938373/fluuter-widget04_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938374/fluuter-widget05_.png)
Details
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938376/fluuter-widget06_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938378/fluuter-widget07_.png)
Most Important Widgets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938463/fluuter-widget08_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938464/fluuter-widget09_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938465/fluuter-widget10_.png)
Most Important Widgets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938467/fluuter-widget11_.png)
Details
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938468/fluuter-widget12_.png)
Columns & Rows
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938471/flutter-columnrow01.png)
Column & Row
Alignment
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938472/flutter-columnrow02.png)
Flexible & Expanded
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938473/flutter-columnrow03.png)
Flexible & Expanded
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938474/flutter-columnrow04.png)
Container vs
Column / Row
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938475/flutter-columnrow05.png)
ListView
![](https://s3.amazonaws.com/media-p.slid.es/uploads/802713/images/6938476/flutter-columnrow06.png)
There are no secrets to success. It is the result of preparation, hard work, and learning from failure. - Colin Powell
THANK YOU
Flutter Training (Basic)
By Abdullah Fathi
Flutter Training (Basic)
- 333