Intro to Flutter
/Helwan.GDG @ HelwanGDG
meetup.com/GDG-Helwan/
GDG Helwan
Speaker Bio
● Official Google Speaker
● GDG Helwan Founder & Leader
● Kotlin Cairo User Group Founder
● Mentor in Udacity Nanodegree
● Mobile & Web Evangelist
● Technology savvy
● Think tank
● UI/UX freak
www.linkedin.com/in/shadyselim/
@dr_Shady_Selim
Mobile OS
Linux Kernel and Device Drivers
Core OS
Core Services & Media
Cupertino Widget
IOS
Linux Kernel and Device Drivers
Libraries & Run Time
Applications & Framework
Material Design Widgets
Android
Native Approach (Single Platform)
Swift Kotlin
OEM SDKs
OEM Widgets
Cupertino
Material Design
Canvas
Events
Location Bluetooth
Camera Sensors
Java
Kotlin
Swift
Objective-c
Application
Services
Popular Cross Tools
Class A Class B
Class A
Web View
Canvas
Events
Location Bluetooth
Camera Sensors
JavaScript
HTML
CSS
Application
Services
Bridge
Canvas
Events
Location Bluetooth
Camera Sensors
Transferred
Native Code
Application
Services
FrameworklibrariesSDK
OEM Widgets
Cupertino
Material Design
Class B
What makes Flutter unique?
- Compiles to Native Code (ARM Binary code)
- No reliance on OEM widgets
- No bridge needed
Flutter Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Native ARM
Binary
Code
Application
Services
Platform
Channels
Flutter Widgets
Cupertino
Material Design
So what is Flutter ?
Flutter is the next step in
App development
Speed and performance
Fast , smooth performance
Flexibility
Customize anything - Brand
first design
Native look and feel
Familiarity , ease of use
Rapid Development
Easy to learn , predictable
Flutter Architecture
What is Dart?
- Open-source web programming language developed by Google.
- Class-based, single-inheritance, object oriented language with C-
style syntax.
- Supports interfaces, abstract classes, reified generics, strong
typing (Dart 2).
- Next generation systems language (Fuchsia ‘Magenta’ – AdWords)
https://www.dartlang.org/community/who-uses-dart
Everything is a Widget with Flutter
Everything is a WidgetApp Widget
Material Widget
Scaffold Widget
Column
Container
Text
Button
Render Tree
https://flutter.io/widgets/
Great looking and fast animation
HTML/CSS Analogs in Flutter
Hot Reload
IDE Support ?
How To install ?
https://flutter.io/setup/
Easy Check !
$ flutter doctor
Questions!?

Intro to Flutter

Editor's Notes

  • #20 Every thig is a widget , we mean everyting you coffe cup , , your keyboard is a widget, your dog
  • #21 Every thig is a widget , we mean everyting you coffe cup , , your keyboard is a widget, your dog