Downloaded 91 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/googlefluttertheeasyandpracticalway-200225165321/85/Google-flutter-the-easy-and-practical-way-25-320.jpg)
Uploaded byAhmed Abu Eldahab
Google flutter the easy and practical way
The document discusses Flutter, a UI toolkit for building mobile, web, and desktop applications from a single codebase. It highlights that Flutter uses Dart and compiles to native ARM machine code, allowing applications built with Flutter to have native performance. It also discusses key Flutter concepts like widgets, how everything is represented as a widget, and how Flutter allows for beautiful animations and fast development cycles.
More Related Content
Similar to Google flutter the easy and practical way
![[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
- 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. Tell me aboutyou? Developers , Designers , Mac , Linux , Windows , Web , Mobile , Android , ios ? @dahabdev
- 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. Key component ofthe Google Developer family
- 16. 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
- 17. Flutter support manytypes of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 18. Flutter support manytypes of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 19. Fast Brings the powerof a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code
- 20. 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
- 23. ● 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)?
- 24.
- 25. 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; }
- 26.
- 27.
- 28. What makes Flutterunique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
- 30. Everything is aWidget
- 31.
- 32.
- 33. App Widget Material Widget ScaffoldWidget Column Container Text Button Render Tree Everything is a Widget
- 34.
- 35.
- 36.
- 37.
- 38. With Flutter nolimit to your imagination!
- 39.
- 40.
- 41. $ flutter doctor $flutter upgrade
- 42. Test https://flutter.dev/docs/testing - Unit testing -Widget testing - Integration testing
- 43.
- 47. Flutter Showcase https://flutter.dev/showcase &https://itsallwidgets.com
- 48. Flutter Showcase https://flutter.dev/showcase &https://itsallwidgets.com
- 49. Flutter Showcase https://flutter.dev/showcase &https://itsallwidgets.com
- 51.
- 52. Ahmed Abu Eldahab GoogleDeveloper Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev