Intro to Flutter

Intro to Flutter

• 1.
  Intro to Flutter EasonPai 2017
• 2.
  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
• 3.
  Flutter Architecture ● FlutterSystem Architecture (2015)
• 4.
  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?
• 5.
  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
• 6.
  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
• 7.
  ● 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)
• 8.
  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
• 9.
  Feature: Hot Reload ● FlutterHot Reload (Dart Developer Summit 2016) [Youtube]
• 10.
  ● Hello World ●To see more widges, ○ check the official Android app Flutter Gallery ○ or the list on web https://flutter.io/widgets/ Flutter Framework (2) import 'package:flutter/material.dart'; void main() { runApp(new Center(child: new Text('Hello, world!'))); }
• 11.
  ● 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')), ); } }
• 12.
  Flutter Framework (4) classMyHomePage 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
• 13.
  Flutter Framework (5) ●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 λ
• 14.
  Accessing Platforms ● 目前只能用在ARM-basedCPU ○ 包括 android emulator! ○ 但其他CPU的支援問題也不大 ○ 已經可產生對應各CPU架構的so，只是在 package tool chain 中還沒動態地把so檔 加進去 ● 可以跟現有的android, ios framework 共用 UI & Code ○ 官方有範例 hello_service 可 以跑起來 ○ Accessing Platform and Third-Party Services in Flutter
• 15.
  Thanks 歡迎到FB社團 Dartisian@tw一起討論 https://www.facebook.com/groups/Dart.tw/