Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google I/O 2018 Extended, Baghdad - Flutter

80 views

Published on

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

Published in: Technology

Google I/O 2018 Extended, Baghdad - Flutter

  1. 1. #GDGBaghdad
  2. 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
  3. 3. WHY 🤨?
  4. 4. OEM SDKs https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  5. 5. 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.
  6. 6. WebViews https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  7. 7. ReactNative https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  8. 8. Flutter https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  9. 9. Flutter vs Native Native Flutter https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  10. 10. Flutter vs ReactNative ReactNative Flutter https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
  11. 11. FlUTTER SYSTEM ARCHITECTURE
  12. 12. Flutter high-level overview
  13. 13. 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
  14. 14. HOT RELOAD
  15. 15. Hot reload
  16. 16. Beautiful UIs
  17. 17. WIDGETS
  18. 18. Column new Column( children: <Widget>[ new Text(‘‫,)'مثال‬ new Text(' ‫إستخدام‬‫الـ‬ Column'), new Text(' ‫في‬‫بناء‬‫واجهة‬ '), ], )
  19. 19. 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,), ], )
  20. 20. 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,), ], )
  21. 21. Local image Image.asset('images/cat-with-butterfly.jpg')
  22. 22. Network image Image.network( ‘https://unsplash.com/photos/rW-I87aPY5Y.jpeg )
  23. 23. Raised Button RaisedButton( child: Text('‫,'تسجيل‬ ), textColor: Colors.white, color: Colors.blue, onPressed: () { signup(); }, ),
  24. 24. 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.
  25. 25. Scaffold Scaffold( appBar: AppBar( title: const Text( ' ‫مستخدم‬‫جديد‬ ', style: TextStyle(fontSize: 16.0), ), ), body: new Center( child: Text(‘ً‫)'مرحبا‬ ), );
  26. 26. 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(); }, ), ), );
  27. 27. 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(); }, ), ), );
  28. 28. 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), ), . . .
  29. 29. 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: () {}, ), ], ), ), . . .
  30. 30. AND MORE…
  31. 31. TabBar
  32. 32. Navigation Drawer
  33. 33. LOTS MORE…
  34. 34. Buttons
  35. 35. Buttons
  36. 36. Inputs and Selections
  37. 37. Inputs and Selections
  38. 38. Dialogs, Alerts and Panels
  39. 39. Dialogs, Alerts and Panels
  40. 40. Information Displays
  41. 41. Information Displays
  42. 42. Information Displays
  43. 43. Layouts
  44. 44. Layouts
  45. 45. FULL LIST ➡️ https://flutter.io/widgets/
  46. 46. SHOWCASES
  47. 47. Samples Reflectly - Mindfulness Journal
  48. 48. Samples Pesto https://github.com/flutter/flutter/tree/master/examples/flutter_gallery
  49. 49. Samples Shrine https://github.com/flutter/flutter/tree/master/examples/flutter_gallery
  50. 50. Samples Animations https://github.com/flutter/flutter/tree/master/examples/flutter_gallery
  51. 51. Samples Tourism Demo
  52. 52. Samples Tourism Demo
  53. 53. Samples http://github.com/bluemix/flutter-tourism-demo
  54. 54. Samples Thanks 😇

×