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

3.
WHY 🤨?

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

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.
WebViews
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

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

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

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

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

11.
FlUTTER SYSTEM ARCHITECTURE

12.
Flutter high-level overview

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.
HOT RELOAD

15.
Hot reload

16.
Beautiful UIs

17.
WIDGETS

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

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.
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.
Local image
Image.asset('images/cat-with-butterfly.jpg')

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

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

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

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.
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.
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.
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.
AND MORE…

31.
TabBar

32.
Navigation Drawer

33.
LOTS MORE…

34.
Buttons

35.
Buttons

36.
Inputs and Selections

37.
Inputs and Selections

38.
Dialogs, Alerts and Panels

39.
Dialogs, Alerts and Panels

40.
Information Displays

41.
Information Displays

42.
Information Displays

43.
Layouts

44.
Layouts

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

46.
SHOWCASES

47.
Samples
Reflectly - Mindfulness Journal

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

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

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

51.
Samples
Tourism Demo

52.
Samples
Tourism Demo

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

54.
Samples
Thanks 😇