The document discusses Flutter, a mobile app SDK created by Google. Flutter allows building beautiful UIs for mobile apps that run at 60 frames per second. It uses the Dart programming language and ships with a large collection of widgets. Flutter aims to provide high performance, beautiful UIs that feel natural on different platforms.
100%(14)100% found this document useful (14 votes)
2K views45 pages
The document discusses Flutter, a mobile app SDK created by Google. Flutter allows building beautiful UIs for mobile apps that run at 60 frames per second. It uses the Dart programming language and ships with a large collection of widgets. Flutter aims to provide high performance, beautiful UIs that feel natural on different platforms.
The document discusses Flutter, a mobile app SDK created by Google. Flutter allows building beautiful UIs for mobile apps that run at 60 frames per second. It uses the Dart programming language and ships with a large collection of widgets. Flutter aims to provide high performance, beautiful UIs that feel natural on different platforms.
The document discusses Flutter, a mobile app SDK created by Google. Flutter allows building beautiful UIs for mobile apps that run at 60 frames per second. It uses the Dart programming language and ships with a large collection of widgets. Flutter aims to provide high performance, beautiful UIs that feel natural on different platforms.
grandcentrix.net +Albrecht Noll +Pascal Welsch @grandcentrix @UhrArt @passsy Agenda - Android (facts and opinions) - Flutter (facts) - Dart (code and opinions) - Flutter (opinions) - Fuchsia (speculations) Android History Oct 2003 2008 2011 2014 2017
Founded 1.0 4.0 5.0 8.0
Holo Material Design Design
Android View API Design (View.java) UI Bugfixes and Improvements ● Project Butter ● RecyclerView ● Design support library ● Instant Run ● Databinding in XML layouts ● Vector Drawables ● ...and thousands small fixes every release My smartphone is lagging - Every Android user ‘17 Android UI Framework ● >10 years old ● The Java API hasn’t seen major changes ● No architectural changes, we are still using android.view to render our UIs
● Feels old ○ XML still “best practice” ○ No virtual dom The entire UI architecture is wrong from the start.
Erik Hellman @ErikHellman Flutter 120 60 FPS UI of the Future What is Flutter? ● A mobile app SDK containing flutter.io ○ complete UI Framework for mobile apps ○ huge Widget catalog ○ Tools ● Allows building beautiful mobile apps ● Platform independent, currently supporting Android, iOS and Fuchsia ● Uses Dart - Easy to learn language by Google Flutters goals ● Beautiful fluid UIs ● Run same UI on multiple platforms, perfect for brand-first designs ● high-performance apps that feel natural on different platforms ● Be productive
flutter.io Flutter highlights ● Super performant, 120fps without optimizations ● Fast development - Hot Reload ● Modern, reactive framework like React
flutter.io Flutter is not yet another Cross-Platform SDK ● Engine is shipped in apk (∽7.5 Mb) ● No bridge needed, direct drawing to platform canvas ● Doesn’t use OEM widgets ● Ships SDK with the app, no fragmentation or compatibility issues App Platform OS
React Native Canvas
OEM Widgets Events
Bridge JavaScript System Services (Location, Bluetooth, Audio, Camera, Sensors, etc.)
Canvas Widget Flutter
Rendering Events Native Flutter Code System Services Platform (Location, Bluetooth, Audio, Camera, Channels Sensors, etc.) What is Dart? ● Java like language - easy to learn ● aimed to replace Javascript (2010) dartlang.org
● DartVM ● Javascript compiler (dart2js)
● Great language compared to Javascript and Java 6
● Missing syntactical sugar from Kotlin Dart 2.0 ● 2.0 is coming soon™ ● Will be sound (type safe) dartlang.org ● Will most likely get nullable types ● “new” could become optional ● Language discussions are available in the sdk repository ● https://github.com/dart-lang/sdk/tree/master/docs ○ Weekly newsletter (6 weeks in a row) ○ informal specifications First Steps - 5 min Setup ● Clone repo and add to $PATH:
● Start developing First Steps - Hello Flutter ● Create a new project $ flutter create myapp
● Or use the Project Wizard in IntelliJ IDEA
Widget Rendering App Platform OS
Canvas Widget Flutter
Rendering Events Native Flutter Code System Services Platform (Location, Bluetooth, Audio, Camera, Channels Sensors, etc.) What are Widgets? class PaddedText extends StatelessWidget { ● Widgets are immutable final String _data; declarations of parts of the UI PaddedText(this._data, {Key key}) ● Like a <div/> : super(key: key);
● a structural element @override
Widget build(BuildContext context) { (e.g. button, menu) return new Padding( padding: const EdgeInsets.all(4.0), ● a stylistic element child: new Text(_data) ); (themes, styles, fonts) } } ● an aspect of layout (padding, center) Everything is a Widget Everything is a Widget ● Application itself is a widget ● Hierarchically stacked ● inherit parent properties ● Composition > inheritance Existing Widgets ● Material Guidelines fully covered by Material Package ● Human Interface Guidelines iOS covered by Cupertino Package ● Premium Flutter Documentation Flutter layered UI Architecture
Important Material Widgets new Scaffold( appBar: new AppBar(title: new Text('AppBar')), body: new ListView( children: <Widget>[ new ListTile( leading: new CircleAvatar(), title: new Text('ItemText'), trailing: new Icon(Icons.thumb_up), ) ], ), floatingActionButton: new FloatingActionButton( child: new Icon(Icons.adb), onPressed: () { /* do nothing */ } ), bottomNavigationBar: new BottomNavigationBar( items: [ new BottomNavigationBarItem( icon: new Icon(Icons.assistant), title: new Text("News")), ... ],),); Why do we want immutable Widgets? Mixed responsibilities (Android) 1. Declare View in XML with initial attributes 2. Mutate View with updated data
<TextView override fun onCreate(savedInstanceState: Bundle?) {
android:id="@+id/myText" super.onCreate(savedInstanceState) android:layout_width="match_parent" android:layout_height="wrap_content" val myText = findViewById<TextView>(R.id.myText) android:text="Hello Droidcon" android:textSize="14sp" /> api.getData() .subscribe({ data -> // mutate view, append text myText.text += data }, { e -> The TextView, responsible for ! drawing text, is now also responsible for the state of the text } }) handleError(e) Widgets on Flutter are immutable
// boilerplate class DroidconState extends State<DroidconWidget> {
class DroidconWidget extends StatefulWidget { @override var _data = "Hello Droidcon"; State<StatefulWidget> createState() { return new DroidconState(); @override } void initState() { } api.getData().then((data) { // append text, trigger rebuild setState(() { _data += data; - You can’t change the text of a }); Widget, a new Widget instance is }); } required - build is a one way function binding @override Widget build(BuildContext context) { data to immutable Widgets return new Text(_data); - setState schedules rebuild of the } widget } Build function ● For smooth animations it may be called for every frame (remember: 120FPS!) ● Flutter diffs the result with the previous build result to minimize updates ● You don’t have to nest it very deep, ○ extract static parts ○ Split it in multiple build functions Integration with the OS App Platform OS
Canvas Widget Flutter
Rendering Events Native Flutter Code System Services Platform (Location, Bluetooth, Audio, Camera, Channels Sensors, etc.) Communication between Android and Flutter ● FlutterView (extends SurfaceView) is placed fullscreen in your Activity. ● Plugins can be initialized which register a MethodChannel on the FlutterView. ● These MethodChannel are invoked by the plugins Dart API SharedPrefs Plugin example Dart part of plugin
String batteryLevel; try { final int result = await methodChannel.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level: $result%.'; } on PlatformException { batteryLevel = "Failed to get battery level."; } SharedPrefs Plugin example Android Kotlin part of plugin
val msgHandler: MethodCallHandler = MethodCallHandler { call, result ->
if (call.method == "getBatteryLevel") { val level: Int = getBatteryLevel()
MethodChannel(flutterView, "samples.flutter.io/battery").setMethodCallHandler(msgHandler) Plugins ● Communication is contract based, can’t be type safe ○ Method name is String ○ Method args are named and dynamic (Map<String, dynamic>) ● MethodChannel work in both directions Official Plugins
github.com/flutter/plugins Shared code with Dart ● FlutterView is required to run dart code. You always need an Activity. ● You can’t run Dart code in a background service ● You can’t reuse network or parsing logic in your JobScheduler ● Unclear if this will ever work Is flutter production ready?
No, but... ...the Flutter team is very aware of it and working hard to make it production ready. Flutter in Production
Hamilton Newsvoice What’s missing - Retrofit/OkHttp and a persistent cache - Google Maps - Push Notifications (iOS) sometimes give no callback - No “headless flutter” Room for improvement - brackets hell, no DSL - workaround 'closing labels' in VS Code in IntelliJ maybe?! - Flatten with variables, extract methods - One missing comma, breaks code completion Openness of Dart/Flutter/Fuchsia ● Everything is open source ● Bug trackers are public and used by Googlers ● Dartlang newsletter inside sdk repository with detailed language decisions for Dart 2.0
● Get help in Gitter gitter.im/flutter/flutter
What is Fuchsia? ● Open-source OS by Google ● /ˈfjuːʃə/ ● No Linux kernel - Google Kernel called Magenta ● Sky Engine with Vulkan ● Languages: ○ Dart, C++, Go, C, Python ○ No Java ● Flutter Apps are native apps
