Download as PDF, PPTX
![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/omancomex2019flutterslides-190410134501/75/The-Magic-of-flutter-Comex-oman-2019-41-2048.jpg)
Uploaded byAhmed Abu Eldahab
The Magic of flutter Comex oman 2019
The document discusses Flutter, an open-source mobile application development framework created by Google. It notes that Flutter allows building high-performance, native-looking apps for iOS and Android from a single codebase. Key benefits of Flutter include its use of widgets that allow control over every pixel, fast development through hot reload, and high performance through compiling to native ARM code. Several large companies that use Flutter in production apps are mentioned, praising its cross-platform capabilities and developer productivity.
More Related Content
![[Alexandria Devfest] the magic of flutter](https://cdn.slidesharecdn.com/ss_thumbnails/egyptdevfestthemagicofflutter-181114115455-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to The Magic of flutter Comex oman 2019
The Magic of flutter Comex oman 2019
- 1. The Magic ofFlutter By : Ahmed Abu Eldahab @dahabdev
- 2. Ahmed Abu Eldahab SeniorTechnical Consultant Google Developer Expert in Flutter /Dahabdev
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. The dilemma ofmobile app development
- 9. Flutter For Business(CEOs - PMs )
- 10. Flutter For Business(CEOs - PMs )
- 11. Flutter For Business(CEOs - PMs )
- 12.
- 13. IOS Kernel and DeviceDrivers Core OS Core Services & Media OEM Widget (Material Design - Cupertino) Android
- 14.
- 15. Native Approach(Single Platform) OEMWidgets Cupertino Material Design Canvas Events Location Bluetooth Camera Sensors Java Kotlin Swift Objective-c Application Services
- 16.
- 17. Advantages Disadvantages Tech - Richuser experience - High performance - Security matter - Native API support Biz - Easy to hire - Stable codebase Tech - Two different Platforms - Two different programming languages - Not easy to maintain the same UI Biz - Double time - Double Cost - Two different teams Native Approach (Single Platform)
- 18. Hybrid Approach Web View Canvas Events LocationBluetooth Camera Sensors JavaScript HTML CSS Application Services Bridge
- 19. Cross-Platform Approach Canvas Events Location Bluetooth CameraSensors Transferred Native Code Application Services FrameworklibrariesSDK OEM Widgets Cupertino Material Design C# JavaScript
- 20. Cross-Platform Approach Canvas Events Location Bluetooth CameraSensors Javascript Application Services JavascriptBridge OEM Widgets Cupertino Material Design JavaScript
- 22. Flutter Approach Canvas Events Location Bluetooth CameraSensors Native ARM Binary Code Services Platform Channels Flutter Widgets Cupertino Material Design
- 23.
- 24. Control every pixelon the screen Make your brand come to life Never say "no" to your designer Stand out in the marketplace Win awards with beautiful UI Beautiful
- 25. Fast Brings the powerof a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code
- 26. Sub-second reload times Paintyour 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
- 27. What is Flutter? Flutteris 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
- 28. What makes Flutterunique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
- 29. ● Language andLibraries ● Packages manager https://pub.dartlang.org/ ● Virtual machine ● Compile to Javascript dart2js Batteries included
- 30. Who use Dart? https://www.dartlang.org/community/who-uses-dart GoogleAdWords Google Fuchsia AdSense performance reports Google Fiber Mandrill AdWords for video Google internal sales tool Google internal CRM Adobe
- 31. Google Fuchsia Fuchsia isa capability-based, real-time operating system (RTOS) currently being developed by Google. https://github.com/fuchsia-mirror/
- 32. Confidential + Proprietary Whouses Flutter?
- 33. Hamilton launched asa featured app on iOS and Android within three months of us writing our first line of Flutter code. “ ”
- 34.
- 35. >1M+ installs 500,000 MAU 160,000DAU 65M+ Cloud Invocations 4.7 Star rating on Play
- 36. “Flutter provides amodern reactive framework that enabled us to unify the codebase and teams for our Android and iOS applications. It's allowed the team to be much more productive, while still delivering a native application experience to both platforms. Stateful hot reload has been a game changer for productivity” Sridhar Ramaswamy SVP, Google Ads and Commerce
- 38. Alibaba’s app incorporatesFlutter to power parts of their app. Deployed to millions of devices. Alibaba praises Flutter for its consistency across platforms, the ease of generating UI code from designer redlines, and the ease with which their native developers have learned Flutter.
- 39. We have 3xthe bandwidth now that all of our teams are consolidated on a single code base. “ ” Much easier to hire. We now look to take the best candidate regardless if they are from Web, iOS or Android. “ ”
- 40. Full frame isgreat, use a scrim for text.
- 41. HTML/CSS Analogs inFlutter 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; }
- 42. Great looking andfast Widgets
- 43.
- 44.
- 45. With Flutter nolimit to your imagination!
- 46.
- 47. $ flutter doctor Checksyour environment and displays a report to the terminal window $ flutter upgrade Updates both the Flutter SDK and your packages
- 48. Test https://flutter.io/testing/ - Unit testing -Widget testing - Integration testing
- 49. How To install? https://flutter.io/get-started/install/
- 50.
- 51. Flutter Showcase https://flutter.io/showcase &https://itsallwidgets.com
- 52. Flutter Showcase https://flutter.io/showcase &https://itsallwidgets.com
- 53. Flutter Showcase https://flutter.io/showcase &https://itsallwidgets.com
- 54. Confidential + Proprietary Keycomponent of the Google Developer family
- 55. Bring your app tothe the other platform Start a new app from scratch Use Flutter for a part of your app Prototype a new app idea Four ways to use Flutter today
- 56.
- 57. Ahmed Abu Eldahab SeniorTechnical Consultant Google Developer Expert in Flutter /Dahabdev