需要跨平台開發？要不要試試 Flutter? - 房志剛

本議程將介紹 Flutter 作為一個跨平台框架，基本的原理介紹，及使用的利弊性，並以自身開發高科校務通及 DevFest App 的經驗為例。

先備知識

無，但如果有開發過Mobile App或Web會比較有感

tags: SITCON 2020 共筆 SITCON 2020 2020 共筆 R1

歡迎大家來到SITCON 2020 ヽ(✿ﾟ▽ﾟ)ノ
共筆入口：https://hackmd.io/@SITCON/2020
手機版請點選上方 按鈕展開議程列表。

請從這裡開始

Slide

原理介紹

跨平台前端框架

  • 前端定義

    負責渲染UI

  • 跨平台定義

    單一程式碼，發佈到不同的平台上(mobile web desktop embedded)

Flutter 使用語言 : Dart

  • 平台:

    Moblie
    Web (不穩定)
    Desktop (不穩定)
    Embedded

由Google開發
  • Dart(按鈕，開關) -> Skia(渲染引擎)
  • Flutter 僅限渲染 APP 內的畫面(如:Toast 無法在回到桌面時還繼續保留)

(除了原生APP 也有用網頁直接以WebView 植入APP)

以JavaScript為主(React Native)

  • 依然保留原生元件
  • 問題

    Android 元件碎片化(Android 跨版本問題)

為什麼講師選擇Flutter?

  • 擁有其他 framework 沒有的渲染引擎

介面撰寫

Flutter create產生的範例code 片段

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
  • 程式碼屬於樹狀結構
  • 一層包過一層
  • 與HTML唯一差別為:

    程式碼就是介面

  • 擁有 google (Material) 和 iOS(Cupertino) 兩種 style
    • 可依據平台渲染相對應的 style

Codepen

原生特性

  • Flutter IN Mobile

    Android AND iOS

    • 最低支援版本

      Android 4.1(API 16)
      iOS 8

    • 讓持有比較早期的裝置也能正常使用

問題

Issue #13452

​​​​>長按輸入框造成

Issue越解越多

​​​​>太貪心, 跨太多平台了
​​​​>~~用戶問題很多~~

生態系統

  • 官方提供 Official Plugin、Firebase Plugin

  • 套件數量大幅上升中!

  • Dart 不好找資源(相比於JavaScript)

Flutter on Web

  • SKIA -> Dart2JS
  • 2020年加強效能及穩定性

    轉移至 CanvasKit(較為底層)

  • 目前: DomCanvas+CanvasKit(混用)
  • 目前注重於UI繪製
  • 講師說他是玩具

Flutter on Desktop

  • MacOS(alpha) windows(Develop) linux(alpha)
  • 依然被認為玩具

Flutter on Fuchsia

  • Fuchsia 還在 Develop
  • 依然還是玩具

實用工具

  • DartPad(Official)
  • CodePad
  • IDE
    • IntelliJ
    • VSCode
    • AndroidStudio
  • DevTools(Official)

    輔助偵錯

  • UI繪製
    • Sketch
    • Adobe XD

展望

致命傷 : Dart 太少人用

  • 全平台制霸?
  • 直接當垃圾?

Q&A

Flutter vs Electron

Electron 像寫網頁 且 有自己的渲染引擎
Flutter 還正在慢慢追 Electron、RN 等 Framework

有用到 Flutter 的 APP 有哪些

  • 到官網看

    KKTIX,KKBOX

Web 和 Desktop 的差別

渲染的技術不同, 也是 Flutter 著重的點

Flutter vs Qt

Qt 用 C++ 寫, 效率好

???

狀態管理蠻重要的

Select a repo