This document discusses Flutter, a Google-developed UI toolkit for building mobile apps using the Dart programming language. It highlights key features of Flutter like compiling to native code, not relying on OEM widgets, and providing a single codebase for both Android and iOS. It covers topics like Flutter's widgets, animations, productivity benefits, and IDE support. Examples of beautiful apps built with Flutter are showcased. The document concludes with recommendations on how to get started with Flutter, like using it for part of an existing app or prototyping a new idea.

1. Ahmed Abu Eldahab
GDE Flutter & Dart
@dahabdev
Google Flutter the easy
and practical way

2. Ahmed Abu Eldahab
Google Developer Expert in Flutter & Dart
Senior Technical Consultant
Kortobaa LLC CTO
/Dahabdev

3. Tell me about you?
Developers ,
Designers , Mac ,
Linux , Windows ,
Web , Mobile ,
Android , ios ?
@dahabdev

4. The dilemma of mobile app development

5. Mobile Development Approaches

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

7. Cross-Platform Approach

8. Cross-Platform Approach

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

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

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

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

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

15. Flutter is Google’s UI toolkit
for building beautiful,
natively compiled
applications for mobile, web,
and desktop from a single
codebase

16. Key component of the Google Developer family

17. Control every pixel on the screen
Make your brand come to life
Never say "no" to your designer
Stand out in the marketplace
Win awards with beautiful UI
Expressive, beautiful UIs

18. Flutter support many types of
Animations
- Tween
- Hero
- Sliver
- Transform
- FadeInWidget
- Animation Builder
- AnimatedOpacity
- Physics-based animation
Beautiful Animations

19. Flutter support many types of
Animations
- Tween
- Hero
- Sliver
- Transform
- FadeInWidget
- Animation Builder
- AnimatedOpacity
- Physics-based animation
Beautiful Animations

20. Fast
Brings the power of a games engine to
user experience development
60fps, GPU accelerated
Compiled to native machine code

21. Sub-second reload times
Paint your app to life
Iterate rapidly on features
Test hypotheses quicker than ever
More time to experiment & test
features
Single-codebase for faster collab
3X Productivity Gains
Productive

22. Flutter offers a portable, high-quality UI toolkit, and a fast, expressive way to build native app UIs.
Key component of the Google Developer family

23. Key component of the Google Developer family

26. ● Language and Libraries
● Packages manager https://pub.dev
● Virtual machine
● Compile to Javascript dart2js
Dart is a client-optimized language for fast apps on any platform!
(Web - Desktop - Mobile - Embedded)?

30. New Dev Tools

31. New Dev Tools

32. New Dartpad
https://dartpad.dev/

33. Supernova
http://supernova.io/

34. Supernova

35. Adobe XD

36. Adobe XD

37. Flutter for web

39. Everything is a Widget

40. Everything is a Widget

41. Everything is a Widget
Stateless Widget is immutable widget doesn’t know anything
& Gets render only once or when the parent widget changes
the configuration

42. Everything is a Widget
Stateful Widget is mutable widget which has its own
properties knowing as state and it can be changed by user
input or by using setState()

43. Flutter Widgets

44. Flutter Widgets

45. Flutter Widgets

46. Flutter Widgets

47. Flutter Widgets

48. Flutter Widgets

49. Flutter Widgets

50. Flutter Widgets

51. Flutter Widgets

52. Flutter Widgets

53. Flutter Widgets

54. Flutter Widgets

55. Flutter Widgets

56. Flutter Widgets

57. https://flutter.dev/docs/reference/widgets

58. https://flutter.dev/docs/reference/widgets

59. App Widget
Material Widget
Scaffold Widget
Column
Container
Text
Button
Render Tree
Everything is a Widget

60. Everything is a Widget

62. IDE Support ?

63. Test
https://flutter.dev/docs/testing
- Unit testing
- Widget testing
- Integration testing

65. https://www.youtube.com/flutterdev

67. https://firebase.google.com/docs/flutter/setup

68. https://www.youtube.com/watch?v=DqJ_KjFzL9I

73. Flutter Showcase
https://flutter.dev/showcase & https://itsallwidgets.com

74. Flutter Showcase
https://flutter.dev/showcase & https://itsallwidgets.com

75. Flutter Showcase
https://flutter.dev/showcase & https://itsallwidgets.com

76. Bring your app
to the the other
platform
Start a new app
from scratch
Test Flutter in production
with one or two screens in
your existing app.
You already have an iOS or
Android app? Use Flutter to
build for the other platform.
Combine codebases when
you’ve proven your Flutter
app.
Build your new idea in Flutter,
and reach both iOS and
Android at the same time.
Use Flutter for a
part of your
app
Prototype a
new app idea
Use Flutter to test out an
app concept or idea in
record time.
Four ways to use Flutter today

77. bit.ly/dahab-youtube

78. Thanks

80. Ahmed Abu Eldahab
Google Developer Expert in Flutter & Dart
Senior Technical Consultant
Kortobaa LLC CTO
/Dahabdev