Google flutter the easy and practical way
1 like475 views
- Flutter is Google's UI toolkit that allows developers to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. - Key benefits of Flutter include its use of Dart programming language, support for many types of animations and beautiful design, ability to compile to native code which makes apps fast, and high developer productivity. - In Flutter, everything is represented as a widget which controls rendering and user interaction, and widgets are composed to build up complex UIs.
![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-200223172445/85/Google-flutter-the-easy-and-practical-way-27-320.jpg)
Google flutter the easy and practical way
- 1. Ahmed Abu Eldahab GDE Flutter & Dart @dahabdev Google Flutter the easy and practical way
- 2. Google Developer Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev
- 3. Tell me about you? Developers , Designers , Mac , Linux , Windows , Web , Mobile , Android , ios ? @dahabdev
- 4. The dilemma of mobile app development
- 6. Native Approach (Single Platform) OEM Widgets Cupertino Material Design Canvas Events Location Bluetooth Camera Sensors Java Kotlin Swift Objective-c Application Services
- 9. Hybrid Approach Web View Canvas Events Location Bluetooth Camera Sensors JavaScript HTML CSS Application Services Bridge
- 10. Cross-Platform Approach Canvas Events Location Bluetooth Camera Sensors Transferred Native Code Application Services FrameworklibrariesSDK OEM Widgets Cupertino Material Design C# JavaScript
- 11. Cross-Platform Approach Canvas Events Location Bluetooth Camera Sensors Javascript Application Services JavascriptBridge OEM Widgets Cupertino Material Design JavaScript
- 13. Flutter Approach Canvas Events Location Bluetooth Camera Sensors Native ARM Binary Code Services Platform Channels Flutter Widgets Cupertino Material Design
- 14. Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase
- 15. Key component of the Google Developer family
- 16. Control every pixel on 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 many types of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 18. Flutter support many types of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 19. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code
- 20. Sub-second reload times Paint your 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
- 21. Flutter offers a portable, high-quality UI toolkit, and a fast, expressive way to build native app UIs. Key component of the Google Developer family
- 22. Key component of the Google Developer family
- 25. ● Language and Libraries ● 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)?
- 26. Google Fuchsia
- 27. 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; }
- 28. Swift UI
- 29. Jetpack Compose
- 30. What makes Flutter unique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
- 32. Supernova
- 33. Adobe XD
- 34. Adobe XD
- 35. Flutter for web
- 36. New Dev Tools
- 37. New Dev Tools
- 40. Everything is a Widget
- 41. Everything is a Widget
- 42. Everything is a Widget Stateless Widget is immutable widget doesn’t know anything & Gets render only once or when the parent widget changes the configuration
- 43. Everything is a Widget Stateful Widget is mutable widget which has its own properties knowing as state and it can be changed by user input or by using setState()
- 46. App Widget Material Widget Scaffold Widget Column Container Text Button Render Tree Everything is a Widget
- 47. Everything is a Widget
- 49. IDE Support ?
- 51. $ flutter doctor $ flutter upgrade
- 52. With Flutter no limit to your imagination!
- 53. Test https://flutter.dev/docs/testing - Unit testing - Widget testing - Integration testing
- 60. Flutter Showcase https://flutter.dev/showcase & https://itsallwidgets.com
- 61. Flutter Showcase https://flutter.dev/showcase & https://itsallwidgets.com
- 62. Flutter Showcase https://flutter.dev/showcase & https://itsallwidgets.com
- 65. Google Developer Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev