Downloaded 79 times
![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/googlefluttertheeasyandpracticalwayieee-200406145109/75/Google-flutter-the-easy-and-practical-way-IEEE-Alazhar-24-2048.jpg)
Uploaded byAhmed Abu Eldahab
Google flutter the easy and practical way IEEE Alazhar
The document discusses different approaches to mobile app development including native, hybrid, and cross-platform approaches. It focuses on introducing Flutter, Google's UI toolkit that allows building beautiful apps for mobile, web, and desktop from a single codebase. Flutter uses its own rendering engine to compile to native ARM machine code, providing a fast development experience without relying on mobile OS widgets. Everything in Flutter is represented as a widget, allowing developers to build customizable user interfaces.
More Related Content
Similar to Google flutter the easy and practical way IEEE Alazhar
![[Alexandria Devfest] the magic of flutter](https://cdn.slidesharecdn.com/ss_thumbnails/egyptdevfestthemagicofflutter-181114115455-thumbnail.jpg?width=640&height=640&fit=bounds)
Google flutter the easy and practical way IEEE Alazhar
- 1. Ahmed Abu Eldahab GDEFlutter & Dart @dahabdev Google Flutter the easy and practical way
- 2. Ahmed Abu Eldahab GoogleDeveloper Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev
- 3.
- 4. The dilemma ofmobile app development
- 5.
- 6. Native Approach (SinglePlatform) OEM Widgets Cupertino Material Design Canvas Events Location Bluetooth Camera Sensors Java Kotlin Swift Objective-c Application Services
- 7.
- 8.
- 9. Hybrid Approach Web View Canvas Events LocationBluetooth Camera Sensors JavaScript HTML CSS Application Services Bridge
- 10. Cross-Platform Approach Canvas Events Location Bluetooth CameraSensors Transferred Native Code Application Services FrameworklibrariesSDK OEM Widgets Cupertino Material Design C# JavaScript
- 11. Cross-Platform Approach Canvas Events Location Bluetooth CameraSensors Javascript Application Services JavascriptBridge OEM Widgets Cupertino Material Design JavaScript
- 13. Flutter Approach Canvas Events Location Bluetooth CameraSensors Native ARM Binary Code Services Platform Channels Flutter Widgets Cupertino Material Design
- 14. Flutter is Google’sUI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase
- 15. 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 Expressive, beautiful UIs
- 16. Flutter support manytypes of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 17. Flutter support manytypes of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 18. Fast Brings the powerof a games engine to user experience development 120fps, GPU accelerated Compiled to native machine code
- 19. 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
- 22. ● Language andLibraries ● Packages manager https://pub.dev ● Virtual machine ● Compile to Javascript dart2js Dart is a client-optimized language for fast apps on any platform! (Web - Desktop - Mobile - Embedded)?
- 23.
- 24. 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; }
- 25.
- 26.
- 27. What makes Flutterunique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
- 29. Everything is aWidget
- 30.
- 31.
- 32. App Widget Material Widget ScaffoldWidget Column Container Text Button Render Tree Everything is a Widget
- 33.
- 34.
- 35.
- 36.
- 37. With Flutter nolimit to your imagination!
- 38.
- 39.
- 40. $ flutter doctor $flutter upgrade
- 41. Test https://flutter.dev/docs/testing - Unit testing -Widget testing - Integration testing
- 42. Flutter Showcase https://flutter.dev/showcase &https://itsallwidgets.com
- 43. Flutter Showcase https://flutter.dev/showcase &https://itsallwidgets.com
- 44. Flutter Showcase https://flutter.dev/showcase &https://itsallwidgets.com
- 46.
- 47. Ahmed Abu Eldahab GoogleDeveloper Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev