The magic of flutter
2 likes2,163 views
A session delivered by @amahdy7 from Finland over Hangout in GDG Helwan DevFest16 that toke place in the Modern Academy in Maadi The slides discuss the power of Flutter and how to start develop with it
![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/themagicofflutter-171120094951/85/The-magic-of-flutter-9-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to The magic of flutter (20)
Ad
More from Shady Selim (20)
Ad
Recently uploaded (20)
The magic of flutter
- 1. The Magic of Flutter AMahdy Abdelaziz Developer Advocate @ Vaadin amahdy.net @amahdy7
- 2. What is Flutter? A SDK that makes building high-performing, modern and beautiful apps easy Works for both Android and iOS An open-source toolkit, developed by Google* 100+ contributions from the open source community * Currently in Alpha
- 3. Who is Flutter for? Designers that care about a brand-driven experience on Android and iOS Prototypers get a high-fidelity and fast way to build working prototypes. Developers benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences.
- 4. 1. Developer Experience 2. Performance
- 6. What do you see here?
- 7. Diagram the Layout - Look for rows and columns - Is there a grid? - Any overlapping elements? - Do we need tabs? - Padding, alignment or borders needed?
- 9. 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; }
- 11. $ flutter doctor Checks your environment and displays a report to the terminal window $ flutter upgrade Updates both the Flutter SDK and your packages
- 12. Hot Reload Injecting updated source code files into the running Dart VM Stateful: App state is retained after a reload. Quickly iterate on a screen deeply nested in your app
- 14. Dart Observatory Statement-level single-stepping debugger and profiler Automatically running when you start your app using flutter run See which lines of code have executed Check out memory allocations Debug memory leaks & fragmentation
- 15. The Power of Widgets
- 16. Great looking and fast Widgets
- 17. Everything is a Widget
- 19. Using platform channels allows for receiving method calls and sending back results
- 21. - Compiles to Native Code - No reliance on OEM widgets - No bridge needed - Structural Repainting
- 23. - A single codebase for Android and iOS - Rapid development cycles - Great tooling
- 24. Setup
- 25. flutter.io/setup
- 26. $ flutter create **appname**
- 27. $ flutter run
- 28. flutter.io/setup $ flutter create **appname** $ flutter run https://codelabs.developers.google.com/codelabs/flutter/
- 29. Additional resources Blog What’s Revolutionary about Flutter by Wm Leler: goo.gl/bZcFR9 Video Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0-DU Video The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0 And of course: github.com/flutter & flutter.io
- 30. Thank you! AMahdy Abdelaziz Developer Advocate @ Vaadin amahdy.net @amahdy7