The magic of flutter
-
Upload
shady-selim -
Category
Technology
-
view
118 -
download
0
Transcript of The magic of flutter
![Page 1: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/1.jpg)
The Magic of FlutterAMahdy AbdelazizDeveloper Advocate @ Vaadinamahdy.net@amahdy7
![Page 2: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/2.jpg)
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
![Page 3: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/3.jpg)
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.
![Page 4: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/4.jpg)
1. Developer Experience2. Performance
![Page 5: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/5.jpg)
Design-orientedDevelopment Flow
![Page 6: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/6.jpg)
What do you see here?
![Page 7: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/7.jpg)
Diagram the Layout- Look for rows and columns- Is there a grid?- Any overlapping elements?- Do we need tabs?- Padding, alignment or borders needed?
![Page 8: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/8.jpg)
Designing bottom up
![Page 9: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/9.jpg)
HTML/CSS Analogs in Fluttervar 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;
}
![Page 10: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/10.jpg)
Efficient Tooling
![Page 11: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/11.jpg)
$ flutter doctor
Checks your environment and displays a report to the terminal window
$ flutter upgrade
Updates both the Flutter SDK and your packages
![Page 12: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/12.jpg)
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
![Page 13: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/13.jpg)
![Page 14: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/14.jpg)
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
![Page 15: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/15.jpg)
The Power of Widgets
![Page 16: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/16.jpg)
Great looking and fast Widgets
![Page 17: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/17.jpg)
Everything is a Widget
![Page 18: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/18.jpg)
Platform Channels
![Page 19: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/19.jpg)
Using platform channels allows for receiving method calls and sending back results
![Page 20: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/20.jpg)
Optimized for Performance
![Page 21: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/21.jpg)
- Compiles to Native Code- No reliance on OEM widgets- No bridge needed- Structural Repainting
![Page 22: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/22.jpg)
Superpowered by Dart
![Page 23: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/23.jpg)
- A single codebase for Android and iOS
- Rapid development cycles- Great tooling
![Page 24: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/24.jpg)
Setup
![Page 25: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/25.jpg)
flutter.io/setup
![Page 26: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/26.jpg)
$ flutter create **appname**
![Page 27: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/27.jpg)
$ flutter run
![Page 28: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/28.jpg)
flutter.io/setup
$ flutter create **appname**
$ flutter run
https://codelabs.developers.google.com/codelabs/flutter/
![Page 29: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/29.jpg)
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
![Page 30: The magic of flutter](https://reader030.fdocuments.in/reader030/viewer/2022020301/5a6491377f8b9a36568b5051/html5/thumbnails/30.jpg)
Thank you!AMahdy AbdelazizDeveloper Advocate @ Vaadinamahdy.net@amahdy7