The document discusses using Flutter to build web applications. Flutter is Google's UI toolkit that allows building mobile, web, and desktop apps from a single codebase. It highlights features like animations, being fast and productive, and the Dart programming language. It provides resources on getting started with Flutter web, examples of Flutter web apps, and questions around web plugin support and optimizations.

1. Ahmed Abu Eldahab
GDE Flutter & Dart
@dahabdev
Build web applications
using Google Flutter

2. bit.ly/dahab-youtube

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

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

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

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

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

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

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

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

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

13. For web

14. For web
2012 2015
dart2js
12/2018 05/2019
Flutter Web
technical preview
12/2019
hummingbird
Flutter Web beta
?

15. Flutter Architecture

16. Flutter Architecture

17. https://flutter.dev/docs/get-started/web
- SDK installed > 1.12
- Chrome installed
Setup
For web

18. https://flutter.dev/docs/get-started/web
- SDK installed > 1.12
- Chrome installed
Setup
For web

19. https://flutter.dev/docs/get-started/web
Confirm support
For web

20. https://flutter.dev/docs/get-started/web
Create and run
For web

21. https://flutter.dev/docs/get-started/web
Add web support to
an existing app
For web

22. https://flutter.dev/docs/get-started/web
For web

23. https://flutter.dev/docs/get-started/web
For web

24. https://flutter.dev/docs/get-started/web
For web

25. https://flutter.dev/docs/get-started/web
For web

26. https://flutter.dev/docs/get-started/web
For web

27. https://flutter.dev/docs/get-started/web
For web

28. For web
https://dartpad.dev/

29. For web

30. For web
https://codepen.io/team/codepen/pen/mdeVWjp

31. For web
https://codepen.io/team/codepen/pen/mdeVWjp

32. For web
https://codepen.io/zoeyfan/pen/mdeebvy

33. https://codepen.io/topic/flutter/templates
For web

34. For web
➢ obfuscated
➢ Minified
➢ Tree shaking

35. For web
➢ obfuscated
➢ Minified
➢ Tree shaking

36. For web
Plugins support?

37. For web

39. Thanks

40. bit.ly/dahab-youtube

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