[Alexandria Devfest] the magic of flutter
8 likes•1,034 views
Flutter is a new mobile app development framework created by Google that allows building high-performance, native apps for iOS and Android from a single codebase. It uses Dart as its programming language. Flutter compiles code to native ARM machine code rather than interpreting it, allowing apps built with Flutter to perform similarly to those built natively with Swift or Java. Flutter provides widgets that are analogous to HTML/CSS elements, allowing developers to build custom user interfaces easily. Flutter also supports features like hot reload, which instantly pushes code and UI changes to the emulator or device.
![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;
}](https://image.slidesharecdn.com/egyptdevfestthemagicofflutter-181114115455/85/Alexandria-Devfest-the-magic-of-flutter-23-320.jpg)
[Alexandria Devfest] the magic of flutter
- 1. The Magic of Flutter By : Ahmed Abu Eldahab @dahabdev
- 2. About Me My name is Ahmed Abu Eldahab /Dahabdev /Dahabdev /Dahabit - Co-Founder & CTO of Savvy Tech - Founder of FlutterEgypt - GDG Alexandria Organizer - I wrote my first line of code 22 years ago (1995). - I started teaching programming since (2000). - I have 15+ years experience with software (Web - Mobile - Desktop)
- 3. About Us FlutterEgypt - World first Flutter Meetup community ( our first meetup was 27th january 2018) - World first Flutter community that join Together with Google Developers (30th april 2018) /FlutterEgypt http://flutteregypt.com
- 9. IOS Kernel and Device Drivers Core OS Core Services & Media UI OEM Widgets (Material Design - Cupertino) @dahabdev Android
- 11. OEM Widgets Cupertino Material Design Canvas Events Location Bluetooth Camera Sensors Java Kotlin Swift Objective-c Application Services Native Approach (Single Platform)
- 13. Hybrid Approach Web View Canvas Events Location Bluetooth Camera Sensors JavaScript HTML CSS Application Services Bridge @dahabdev
- 14. Canvas Events Location Bluetooth Camera Sensors Transferred Native Code Application Services FrameworklibrariesSDK OEM Widgets Cupertino Material Design Cross-Platform Approach C# JavaScript
- 15. Canvas Events Location Bluetooth Camera Sensors Javascript Application Services JavascriptBridge OEM Widgets Cupertino Material Design Cross-Platform Approach JavaScript @dahabdev
- 16. Flutter Approach Canvas Events Location Bluetooth Camera Sensors Native ARM Binary Code Application Services Platform Channels Flutter Widgets Cupertino Material Design @dahabdev
- 17. What is Flutter? Flutter is the next step in App development Speed and performance Fast , smooth performance Flexibility Customize anything - Brand first design Native look and feel Familiarity , ease of use Rapid Development Easy to learn , predictable
- 18. What makes Flutter unique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
- 19. What is Dart? One language to rule them all.. - Open-source web programming language developed by Google. - Class-based, single-inheritance, object oriented language with C-style syntax. - Supports interfaces, abstract classes, reified generics, and optional typing(Dart 1) and strong typing (Dart 2)..
- 20. ● Language and Libraries ● Packages manager https://pub.dartlang.org/ ● Virtual machine ● Compile to Javascript dart2js Batteries included
- 21. Who use Dart? https://www.dartlang.org/community/who-uses-dart Google AdWords Google Fuchsia AdSense performance reports Google Fiber Mandrill AdWords for video Google internal sales tool Google internal CRM Adobe
- 22. Google Fuchsia Fuchsia is a capability-based, real-time operating system (RTOS) currently being developed by Google. https://github.com/fuchsia-mirror/
- 23. 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; }
- 24. Want to build Great looking and fast Apps?
- 25. Everything is a Widget
- 27. Flutter Architecture You can customize anything in green
- 28. Hot Reload
- 30. With Flutter no limit to your imagination!
- 31. Test https://flutter.io/testing/ - Unit testing - Widget testing - Integration testing
- 32. How To install ? https://flutter.io/get-started/install/
- 33. IDE Support?
- 37. Thanks
- 38. About Me My name is Ahmed Abu Eldahab /Dahabdev /Dahabdev /Dahabit - Co-Founder & CTO of Savvy Tech - Founder of FlutterEgypt - GDG Alexandria Organizer - I wrote my first line of code 22 years ago (1995). - I started teaching programming since (2000). - I have 15+ years experience with software (Web - Mobile - Desktop)