My presentation about Flutter on Google I/O 2018 Extended hosted by d3stud.io in Baghdad (#gdgbaghdad). It shows how Flutter outperforms ReactNative and other cross-platform frameworks. It also shows how Flutter handles Arabic (RTL languages) at best. At the end, it concludes with a small project called Tourism Demo, that shows the capabilities of Flutter, like animations and i18n, among others. https://github.com/bluemix/flutter-tourism-demo

1. #GDGBaghdad

2. First things first…
• First appeared in May 2017 (1 year ago)
• Designed By
• Uses Dart (Developed by )
• https://flutter.io/
• Current version: Release Preview 1/June 2018

4. WHY 🤨?

5. OEM SDKs
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

6. There are no universal cross-platform,
and you need to take into account
all the possibilities and limitations of them
to choose your ideal solution.

7. WebViews
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

8. ReactNative
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

9. Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

10. Flutter vs Native
Native
Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

11. Flutter vs ReactNative
ReactNative
Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

12. FlUTTER SYSTEM ARCHITECTURE

13. Flutter high-level overview

14. Size of a minimal Flutter app
• Core engine: 3.3 MB (compressed),
• The framework + app code is ≅1.25MB (compressed)
• The LICENSE file (contained in app.flx) is 55k
(compressed)
• Necessary Java code (classes.dex) is 40k (compressed)
• ICU data ≅ 2.1MB (compressed).
Android app (.apk) with a single Center Widget ≅ 6.7MB

15. HOT RELOAD

16. Hot reload

17. Beautiful UIs

18. WIDGETS

19. Column
new Column(
children: <Widget>[
new Text(‘‫,)'مثال‬
new Text(' ‫إستخدام‬‫الـ‬ Column'),
new Text(' ‫في‬‫بناء‬‫واجهة‬ '),
],
)

20. Column
new Column(
children: <Widget>[
new Icon(Icons.star, color: Colors.pink,),
new Icon(Icons.star, color: Colors.blue,),
new Icon(Icons.star, color: Colors.green,),
new Icon(Icons.star, color: Colors.orange,),
],
)

21. Row
new Row(
children: <Widget>[
new Icon(Icons.star, color: Colors.pink,),
new Icon(Icons.star, color: Colors.blue,),
new Icon(Icons.star, color: Colors.green,),
new Icon(Icons.star, color: Colors.orange,),
],
)

22. Local image
Image.asset('images/cat-with-butterfly.jpg')

23. Network image
Image.network(
‘https://unsplash.com/photos/rW-I87aPY5Y.jpeg
)

24. Raised Button
RaisedButton(
child: Text('‫,'تسجيل‬ ),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
signup();
},
),

25. Scaffold
Scaffold(
appBar: AppBar(
title: const Text(
' ‫مستخدم‬‫جديد‬ ',
style: TextStyle(fontSize: 16.0),
),
),
);
Implements the basic Material Design visual layout structure.
This class provides APIs for showing drawers, snack bars,
and bottom sheets.

26. Scaffold
Scaffold(
appBar: AppBar(
title: const Text(
' ‫مستخدم‬‫جديد‬ ',
style: TextStyle(fontSize: 16.0),
),
),
body: new Center(
child: Text(‘ً‫)'مرحبا‬
),
);

27. Scaffold
Scaffold(
appBar: AppBar(
title: const Text(
' ‫مستخدم‬‫جديد‬ ',
style: TextStyle(fontSize: 16.0),
),
),
body: new Center(
child: RaisedButton(
child: Text(
'‫,'تسجيل‬
),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
signup();
},
),
),
);

28. Scaffold
Scaffold(
appBar: AppBar(
title: const Text(
' ‫مستخدم‬‫جديد‬ ',
style: TextStyle(fontSize: 16.0),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.help_outline),
onPressed: () {
print('show help...');
},
),
],
),
body: new Center(
child: RaisedButton(
child: Text(
'‫,'تسجيل‬
),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
signup();
},
),
),
);

29. Bottom Navigation Bar
Scaffold(
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.mail_outline),
onPressed: () {},
),
],
),
),
appBar: AppBar(
title: const Text(
' ‫مستخدم‬‫جديد‬ ',
style: TextStyle(fontSize: 16.0),
),
.
.
.

30. Scaffold’s Floating Action Button
Scaffold(
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(
Icons.add,
),
backgroundColor: Colors.redAccent,
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.mail_outline),
onPressed: () {},
),
],
),
),
.
.
.

31. AND MORE…

32. TabBar

33. Navigation Drawer

34. LOTS MORE…

35. Buttons

36. Buttons

37. Inputs and Selections

38. Inputs and Selections

39. Dialogs, Alerts and Panels

40. Dialogs, Alerts and Panels

41. Information Displays

42. Information Displays

43. Information Displays

44. Layouts

45. Layouts

46. FULL LIST ➡️ https://flutter.io/widgets/

47. SHOWCASES

48. Samples
Reflectly - Mindfulness Journal

49. Samples
Pesto
https://github.com/flutter/flutter/tree/master/examples/flutter_gallery

50. Samples
Shrine
https://github.com/flutter/flutter/tree/master/examples/flutter_gallery

51. Samples
Animations
https://github.com/flutter/flutter/tree/master/examples/flutter_gallery

52. Samples
Tourism Demo

53. Samples
Tourism Demo

54. Samples
http://github.com/bluemix/flutter-tourism-demo

55. Samples
Thanks 😇