狠狠撸

Intro to Flutter
Eason Pai
2017

What is Flutter?
● “Flutter is a new project to help developers build high-performance,
high-fidelity, mobile apps for iOS and Android from a single codebase.”
-- https://flutter.io/ (翻譯：寫一次爽跑雙平台 (again!?))
● Features (Summarized):
○ Performance (AOT Compiling, Flutter Framework)
○ Highly productive and fast development (Hot Reload)
● Well documented FAQ: https://flutter.io/faq/
● Try “Flutter Gallery” on official Android App at Play Store

Flutter Architecture
● Flutter System Architecture (2015)

Feature: AOT Compiling
● AOT compiling Dart for iOS Android (Dart Developer Summit 2016) [Youtube]
○ iOS Restriction: Cannot JIT (Dart VM) (2015)
○ Apply to Android for >3X Faster startup, Speed and Size enhancement (2016)
● Compare to React Native?

Getting Interesting? (1)
● Discusses
○ from Android/iOS developers
■ Sam Lu
○ from UX Designers
■ FAQ: Tips and tools for getting started in user
experience design (aka UX): “I’m still very new to
prototyping but my team uses Flutter which is an
open-sourced framework for building cross-platform
UIs—learning how to use it has been challenging
because it’s my first programming experience but
extremely rewarding. ”(UX @Google)
● Dart is 17 at TIOBE Index for January 2017

Getting Interesting? (2)
● Learnings from building a CRM app at Google (Dart Developer
Summit 2016)
○ Web App
■ Google built it’s own CRM system, big project that
including Customer, Revenue, Planning, Collaboration
function
■ 3 years running, 30 Dart Developers, 800 AngularDart
Components
■ 0% → 100% in 6 months (3 years ago, with ng1)
○ Mobile App
■ demo video (The same bug on both Android/iOS XD)
■ Experience: Productive, Fun, Easy, Fidelity, Write
once, Share with web

● Functional-Reactive Framework & React-like
○ Functional Reactive Programming?
■ 30 天精通 RxJS (01)：認識 RxJS：“Functional Reactive Programming 是一種編程範式
(programming paradigm)... RxJS 確實是 Functional Programming 跟 Reactive
Programming 的結合，但能不能稱為 Functional Reactive Programming (FRP) 一直有爭
議”
● “Functional Programming，那就是用 function 來思考我們的問題，以及撰寫程式 ”
● “Reactive Programming 簡單來說就是當變數或資源發生變動時，由變數或資源自
動告訴我發生變動了 ”
● Flutter FAQ：“The Flutter framework uses a functional-reactive style programming model, whose
performance depends heavily on the underlying memory allocator efficiently handling small,
short-lived allocations. The functional-reactive style was developed in languages with this property
and does not work efficiently in languages that lack this facility.” (翻譯：夠快才能叫做FR)
Flutter Framework (1)

Flutter Quick Start
● Flutter Setup
○ SDK → iOS Setup, Android Setup → IDE (IntelliJ, Atom)
■ flutter doctor
○ Mac or Linux Only. Windows support is planned.
○ Android 4.1 (API level 16) or higher.
● Getting Started with Flutter
○ Create project
○ Hot Reload

Feature:
Hot Reload
● Flutter Hot Reload (Dart Developer Summit 2016) [Youtube]

● Hello World
● To see more widges,
○ check the official Android app Flutter Gallery
○ or the list on web https://flutter.io/widgets/
import 'package:flutter/material.dart';
void main() {
runApp(new Center(child: new Text('Hello, world!')));
}

● Custom Widget
● Widgets
○ Any of the widgets will extend
StatefulWidget or StatelessWidget
○ StatelessWidget
■ All member is final
■ It’s state cannot be changed
→ Immutability
■ Example: Text
Flutter Framework (3) void main() {
runApp(new MyWidget("Hello Cool App"));
}
class MyWidget extends StatelessWidget {
final String hello;
MyWidget(this.hello);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(hello)
),
body: new Center(
child: new Text('A Text Widget')),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Text(
'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
),
);
}
}
● StatefulWidget
○ is a Mutable Widget, state can be
changed
○ Example : A list of items. This list will
contain the items internally, items grow
when data retrieved from server

● StatefulWidget
○ "狀態是否可變"比較攏統，對於身為view tier的 solution
來說，”狀態”指的是"view是否可以被重繪"
○ StatelessWidget一旦被 new 就無法再被更新，只能用暴
力法重新 new 一次
○ 繪圖機制效率地只畫有變動的部分，不需要整個view
tree都更新一次
○ "view是否可以被重繪"" 就是透過上述兩種不一樣的
Class API 限制你更新繪圖的能力 ( setState(λ) )
○ Performance?
■ no worries, createState() taking care of it
List
Item
Item
λ

Accessing Platforms
● 目前只能用在ARM-based CPU
○ 包括 android emulator!
○ 但其他CPU的支援問題也不大
○ 已經可產生對應各CPU架構的so，只是在
package tool chain 中還沒動態地把so檔
加進去
● 可以跟現有的android, ios
framework 共用 UI & Code
○ 官方有範例 hello_service 可
以跑起來
○ Accessing Platform and
Third-Party Services in Flutter

Thanks
歡迎到FB社團 Dartisian@tw一起討論
https://www.facebook.com/groups/Dart.tw/

狠狠撸

Intro to Flutter

More Related Content

Intro to Flutter