WIXLIB

Build beautiful native appsin record time with flutterEduardo Telaya- CTO / Software Architect / Drupal Developer

Agenda Context about Apps Native apps Web apps Hybrid appsWhat’s flutter?Who’s flutter for?What makes flutter awesome? Widgets Performance RenderingComments about flutterDemo!Thanks!

Context about Apps

Native apps (advantages) QualityAspect RatiosSpeedIDEStanding on the shoulders of giantsAdvanced UI InteractionsNative Look and FeelUsabilityNew FeaturesThey are Android(Java), Ios(Swift), Windows mobile(.net)

Web apps (advantages) Reduced Development CostsEase of IntegrationSimplified MaintenanceEasy installationAccessible anywhereEasily customisableAccessible for a range of devicesEasier to developUse web technologies to build an “app”

Hybrid apps (advantages) Reduced Development CostsImproved UI/UXEase of IntegrationOffline SupportSimplified MaintenanceSingle code base that compiles natively

What do users(client, end user, dev, designer) want? Reduced Development CostsImproved UI/UXEase of IntegrationOffline SupportSimplified MaintenanceQualitySpeedStanding on the shoulders of giantsAdvanced UI InteractionsSingle code base that compiles natively

What If I told you that flutter has got! Reduced Development CostsImproved UI/UXEase of IntegrationOffline SupportSimplified MaintenanceQualitySpeedStanding on the shoulders of giantsAdvanced UI InteractionsSingle code base that compiles natively

What is Flutter?A SDK that makes building high-performing, modern and beautiful apps easyWorks for both Android and iOSAn open-source toolkit, developed by Google*100 contributions from the open source community* Currently in Beta

Who is Flutter for?Designers converge on a brand-driven experience on Android and iOSPrototypers 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 forworking on features and delightful experiences.

1. Developer Experience2. Performance

Design-orientedDevelopment Flow

What do you see here?

Diagram the Layout-Look for rows and columnsIs there a grid?Any overlapping elements?Do we need tabs?Padding, alignment or borders needed?

Designing bottom up

HTML/CSS Analogs in Fluttervar container new Container( // grey boxchild: new Text( div class "greybox" "Lorem ipsum",Lorem ipsumstyle: new TextStyle( /div fontSize: 24.0fontWeight: FontWeight.w900,.greybox {fontFamily: "Georgia",background-color: #e0e0e0; /* grey 300 */),width: 320px;),height: 240px;width: 320.0,font: 900 24px Georgia;height: 240.0,}color: Colors.grey[300],);

Efficient Tooling

flutter doctorChecks your environment and displays a report to the terminal window flutter upgradeUpdates both the Flutter SDK and your packages

pubspec.yamlname: flutter projectdescription: An amazing Flutter project using Firebase Authdependencies:flutter:sdk: flutterfirebase auth: " 0.2.5"

pubspec.yamlname: flutter projectdescription: An amazing Flutter project using Firebase Authdependencies:flutter:sdk: flutterfirebase auth: " 0.1.2 0.2.6"

flutter packages getChecks your environment and displays a report to the terminal window flutter packages upgradeWill retrieve the highest available version of the package

flutter formatAutomatically formats your code according to the Flutter-style flutter analyzeAnalyzes your code and help you find possible mistakes

Hot ReloadInjecting updated source code files into the running Dart VMStateful: App state is retained after a reload.Quickly iterate on a screen deeply nested in your app

Dart ObservatoryStatement-level single-stepping debugger and profilerAutomatically running when you start your app using flutter runSee which lines of code have executedCheck out memory allocationsDebug memory leaks & fragmentation

The Power of Widgets

Great looking and fast Widgets

Everything is a Widget

Goodbye, global layout systemnew Center(child: new Text('Centered Text', style: textStyle),)Local layouts: Every Widget defines it’s own layout. No need to tell the parent thatit’s children are supposed to be centered.

StatefulWidgetvs.StatelessWidget

Customizing and extending WidgetsFlutter’s Widget system was designed to be easily customizableComposition: Widgets are built out of smaller widgets that you can reuse andcombine in novel ways to make custom widgetsclass RaisedButton extends StatelessWidget {.}

imationPaintingGesturesFoundationEngine(C )SkiaDartTextEach layerbuilds uponthepreviouslayer

Optimized for Performance

-Compiles to Native CodeNo reliance on OEM widgetsNo bridge neededStructural Repainting

Superpowered by Dart

-Sound type systemTree ShakingRich core librariesMulti-gen, lockless GC

- Single codebase forAndroid and iOS- Rapid development cycles- Great tooling

“Running at 60 fps, user interfaces created withFlutter perform far better than those created withother cross-platform development ng-an-android-app-with-flutter--cms-28270

“Coding with Dart and Flutter rekindled the joy Ihad when I started with mobile dev way backwhen No pp-flutter

"The UI is butter smooth (when building a releaseversion), I have never seen such a smoothAndroid app"Pascal Welsch, Speaker at Droidcon Berlin

Additional resourcesBlog: What’s Revolutionary about Flutter by Wm Leler: goo.gl/bZcFR9Video: Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0-DUVideo: The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0And of course: github.com/flutter & flutter.io

Thank you!Eduardo Telaya- CTO / Software Architect /- Drupal Developer

Build beautiful native apps in record time with flutter Eduardo Telaya - CTO