Flutter is a new mobile app development framework created by Google that allows building high-performance, native apps for iOS and Android from a single codebase. It uses Dart as its programming language. Flutter compiles code to native ARM machine code rather than interpreting it, allowing apps built with Flutter to perform similarly to those built natively with Swift or Java. Flutter provides widgets that are analogous to HTML/CSS elements, allowing developers to build custom user interfaces easily. Flutter also supports features like hot reload, which instantly pushes code and UI changes to the emulator or device.

1. The Magic of Flutter
By : Ahmed Abu Eldahab
@dahabdev

2. About Me
My name is Ahmed Abu Eldahab
/Dahabdev /Dahabdev /Dahabit
- Co-Founder & CTO of Savvy Tech
- Founder of FlutterEgypt
- GDG Alexandria Organizer
- I wrote my first line of code 22 years ago (1995).
- I started teaching programming since (2000).
- I have 15+ years experience with software (Web - Mobile - Desktop)

3. About Us
FlutterEgypt
- World first Flutter Meetup community ( our first meetup was
27th january 2018)
- World first Flutter community that join Together with Google
Developers (30th april 2018)
/FlutterEgypt
http://flutteregypt.com

4. Mobile Platforms

5. Mobile Platforms

6. Mobile Platforms

7. Mobile Platforms

8. Mobile Platforms

9. IOS
Kernel and Device Drivers
Core OS
Core Services & Media
UI OEM Widgets (Material Design - Cupertino)
@dahabdev
Android

10. Mobile Development Approaches
@dahabdev

11. OEM Widgets
Cupertino
Material Design
Canvas
Events
Location Bluetooth
Camera Sensors
Java
Kotlin
Swift
Objective-c
Application
Services
Native Approach (Single Platform)

12. Cross-Platform Approach

13. Hybrid Approach
Web View
Canvas
Events
Location Bluetooth
Camera Sensors
JavaScript
HTML
CSS
Application
Services
Bridge
@dahabdev

14. Canvas
Events
Location Bluetooth
Camera Sensors
Transferred
Native Code
Application
Services
FrameworklibrariesSDK
OEM Widgets
Cupertino
Material Design
Cross-Platform Approach
C#
JavaScript

15. Canvas
Events
Location Bluetooth
Camera Sensors
Javascript
Application
Services
JavascriptBridge
OEM Widgets
Cupertino
Material Design
Cross-Platform Approach
JavaScript
@dahabdev

16. Flutter Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Native ARM
Binary
Code
Application
Services
Platform
Channels
Flutter Widgets
Cupertino
Material Design
@dahabdev

17. 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

18. What makes Flutter unique?
- Compiles to Native Code (ARM Binary code)
- No reliance on OEM widgets
- No bridge needed
- No markup language (only Dart)

19. What is Dart?
One language to rule them all..
- 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, and optional
typing(Dart 1) and strong typing (Dart 2)..

20. ● Language and Libraries
● Packages manager https://pub.dartlang.org/
● Virtual machine
● Compile to Javascript dart2js
Batteries included

21. Who use Dart?
https://www.dartlang.org/community/who-uses-dart
Google AdWords Google Fuchsia
AdSense
performance reports
Google Fiber
Mandrill AdWords for video
Google internal
sales tool
Google internal
CRM
Adobe

22. Google Fuchsia
Fuchsia is a capability-based, real-time operating system (RTOS)
currently being developed by Google.
https://github.com/fuchsia-mirror/

23. HTML/CSS Analogs in Flutter
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}

24. Want to build Great looking and fast Apps?

25. Everything is a Widget

26. https://flutter.io/widgets/

27. Flutter Architecture
You can customize anything in green

28. Hot Reload

29. Flutter Widget Inspector

30. With Flutter no limit to
your imagination!

31. Test
https://flutter.io/testing/
- Unit testing
- Widget testing
- Integration testing

32. How To install ?
https://flutter.io/get-started/install/

33. IDE Support?

34. Flutter Showcase
https://flutter.io/showcase https://itsallwidgets.com

35. Flutter Showcase
https://flutter.io/showcase https://itsallwidgets.com

36. Flutter Showcase
https://flutter.io/showcase https://itsallwidgets.com

37. Thanks

38. About Me
My name is Ahmed Abu Eldahab
/Dahabdev /Dahabdev /Dahabit
- Co-Founder & CTO of Savvy Tech
- Founder of FlutterEgypt
- GDG Alexandria Organizer
- I wrote my first line of code 22 years ago (1995).
- I started teaching programming since (2000).
- I have 15+ years experience with software (Web - Mobile - Desktop)