![Page 1: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/1.jpg)
Ahmed Abu EldahabGDE Flutter & Dart@dahabdev
Building Beautiful Apps
![Page 2: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/2.jpg)
Tell me about you?
Developers , Designers , Mac , Linux , Windows ,
Web , Mobile , Android , ios ?
@dahabdev
![Page 3: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/3.jpg)
Agenda● Context about Apps
○ Native apps○ Web apps○ Hybrid apps
● What’s flutter?● Who’s flutter for?● What makes flutter awesome?
○ Widgets○ Performance○ Rendering
● Comments about flutter● Demo!● Thanks!
![Page 4: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/4.jpg)
Context about Apps
![Page 5: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/5.jpg)
Native apps (advantages)● Quality● Aspect Ratios● Speed● IDE● Standing on the shoulders of giants● Advanced UI Interactions● Native Look and Feel● Usability● New Features
They are Android(Java), Ios(Swift), Windows mobile(.net)
![Page 6: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/6.jpg)
Web apps (advantages)● Reduced Development Costs● Ease of Integration● Simplified Maintenance● Easy installation● Accessible anywhere● Easily customisable● Accessible for a range of devices● Easier to develop
Use web technologies to build an “app”
![Page 7: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/7.jpg)
Hybrid apps (advantages)● Reduced Development Costs● Improved UI/UX● Ease of Integration● Offline Support● Simplified Maintenance
Single code base that compiles natively
![Page 8: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/8.jpg)
What do users(client, end user, dev, designer) want?
● Reduced Development Costs● Improved UI/UX● Ease of Integration● Offline Support● Simplified Maintenance● Quality● Speed● Standing on the shoulders of giants● Advanced UI Interactions
Single code base that compiles natively
?
![Page 9: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/9.jpg)
What If I told you that flutter has got!
● Reduced Development Costs● Improved UI/UX● Ease of Integration● Offline Support● Simplified Maintenance● Quality● Speed● Standing on the shoulders of giants● Advanced UI Interactions
Single code base that compiles natively
![Page 10: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/10.jpg)
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase
![Page 11: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/11.jpg)
Who is Flutter for?
Designers converge on a brand-driven experience on Android and iOS
Prototypers enjoy 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 12: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/12.jpg)
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
![Page 13: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/13.jpg)
Flutter support many types of Animations
- Tween- Hero- Sliver- Transform- FadeInWidget- Animation Builder- AnimatedOpacity- Physics-based animation
Beautiful Animations
![Page 14: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/14.jpg)
Fast
Brings the power of a games engine to user experience development
60fps, GPU accelerated
Compiled to native machine code
![Page 15: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/15.jpg)
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
![Page 16: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/16.jpg)
![Page 17: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/17.jpg)
What makes Flutter unique?
- Compiles to Native Code (ARM Binary code)- No reliance on OEM widgets- No bridge needed- No markup language (only Dart)
![Page 18: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/18.jpg)
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
![Page 19: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/19.jpg)
Flutter Approach
Canvas
Events
Location Bluetooth
Camera Sensors
Native ARM BinaryCode
Services
Platform Channels
Flutter WidgetsCupertino
Material Design
![Page 20: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/20.jpg)
Flutter Architecture
![Page 21: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/21.jpg)
Flutter Architecture
![Page 22: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/22.jpg)
● 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)?
![Page 23: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/23.jpg)
- Sound type system- Tree Shaking- Rich core libraries- Multi-gen, lockless GC
![Page 24: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/24.jpg)
- Single codebase for Android and iOS
- Rapid development cycles- Great tooling
![Page 25: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/25.jpg)
Design-orientedDevelopment Flow
![Page 26: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/26.jpg)
What do you see here?
![Page 27: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/27.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 28: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/28.jpg)
Designing bottom up
![Page 29: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/29.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 30: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/30.jpg)
The Power of Widgets
![Page 31: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/31.jpg)
Everything is a Widget
![Page 32: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/32.jpg)
StatefulWidgetvs.
StatelessWidget
![Page 33: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/33.jpg)
Customizing and extending Widgets
Flutter’s Widget system was designed to be easily customizable
Composition: Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets
class RaisedButton extends StatelessWidget {...
}
![Page 34: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/34.jpg)
App Widget
Material Widget
Scaffold Widget
Column
Container
Text
Button
Render Tree
Everything is a Widget
![Page 37: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/37.jpg)
Efficient Tooling
![Page 38: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/38.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 39: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/39.jpg)
pubspec.yaml
name: flutter_project
description: An amazing Flutter project using Firebase Auth
dependencies:
flutter:
sdk: flutter
firebase_auth: "^0.2.5"
![Page 40: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/40.jpg)
pubspec.yaml
name: flutter_project
description: An amazing Flutter project using Firebase Auth
dependencies:
flutter:
sdk: flutter
firebase_auth: ">=0.1.2 <0.2.6"
![Page 41: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/41.jpg)
$ flutter packages get
Checks your environment and displays a report to the terminal window
$ flutter packages upgrade
Will retrieve the highest available version of the package
![Page 42: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/42.jpg)
$ flutter format
Automatically formats your code according to the Flutter-style
$ flutter analyze
Analyzes your code and help you find possible mistakes
![Page 43: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/43.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 44: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/44.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 45: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/45.jpg)
Great looking and fast Widgets
![Page 46: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/46.jpg)
Goodbye, global layout system
new Center(child: new Text('Centered Text', style: textStyle),
)
Local layouts: Every Widget defines it’s own layout. No need to tell the parent that it’s children are supposed to be centered.
![Page 47: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/47.jpg)
![Page 48: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/48.jpg)
IDE Support ?
![Page 49: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/49.jpg)
Flutter Showcase
https://flutter.dev/showcase & https://itsallwidgets.com
![Page 50: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/50.jpg)
Flutter Showcase
https://flutter.dev/showcase & https://itsallwidgets.com
![Page 51: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/51.jpg)
Flutter Showcase
https://flutter.dev/showcase & https://itsallwidgets.com
![Page 52: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/52.jpg)
![Page 53: Building Beautiful Apps - Day1... · Beautiful Animations. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine](https://reader033.vdocument.in/reader033/viewer/2022051606/60279bc516c8314f1c1bebd5/html5/thumbnails/53.jpg)
/Dahabdev