My "Google flutter the easy and practical way "talk at Alyamama university

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

2. 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. Flutter is Google’s UI toolkit
for building beautiful,
natively compiled
applications for mobile, web,
and desktop from a single
codebase

15. Key component of the Google Developer family

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

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

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

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

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

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

22. Key component of the Google Developer family

25. ● 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)?

26. Google Fuchsia

27. 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;
}

28. Swift UI

29. Jetpack Compose

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

31. Supernova
http://supernova.io/

32. Supernova

33. Adobe XD

34. Adobe XD

35. Flutter for web

36. New Dev Tools

37. New Dev Tools

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

40. Everything is a Widget

41. Everything is a Widget

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

43. 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()

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

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

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

47. Everything is a Widget

49. IDE Support ?

50. https://flutter.dev/docs/get-started/install

51. $ flutter doctor
$ flutter upgrade

52. With Flutter no limit to your
imagination!

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

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

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

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

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

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

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

64. bit.ly/dahab-youtube

65. Google Developer Expert in Flutter & Dart
Senior Technical Consultant
Kortobaa LLC CTO
/Dahabdev