1. 程式人生 > >一套程式碼 iOS、Android 兩端執行,Google Flutter 對開發者意味著什麼?

一套程式碼 iOS、Android 兩端執行,Google Flutter 對開發者意味著什麼?

點選上方“CSDN”,選擇“置頂公眾號”

關鍵時刻,第一時間送達!

一套程式碼可支援 Android 和 iOS 雙端執行,你 Get 了嗎?

它就是 Flutter。其目標是為了解決移動中的兩個重要問題:一是實現原生應用的效能和與平臺的整合,二是提供一個多平臺,可移植的 UI 工具包來支援高效的應用開發。

640?wx_fmt=png

何為 Flutter?

“Flutter 可幫助你更容易、更快速的開發出介面美觀的移動應用。”Google 官方如是說。

實則,Flutter 是由 Google 的工程師團隊打造的一款移動 UI 框架,它使用的是 Google 自己開發的網路程式語言——Dart 語言,因此,開發者只要使用過 Java 或 JavaScript 之類的語言,那麼 Flutter 也極易上手。

Flutter 旨在幫助開發者建立擁有美觀 UI 介面、高效能、高穩定、高幀率、低延遲的跨平臺(Android 和 iOS)移動應用。Flutter 的介面設計與 Web 應用類似,所以開發者很容易在 Flutter 上找到類似 HTML/CSS 編碼的感覺。

和 React Native 相比,雖然使用的語言不同,但 Flutter 也提供響應式的檢視。此外,Flutter 開發出來的應用在不同的平臺用起來跟原生應用具有一樣的體驗。例如,返回圖示 Android 和 iOS 是不一樣的;滾動內容滾動到底的反饋也是不一樣的。

640?wx_fmt=png

Flutter 發展歷程

2017 年 Google I/O 大會上,Google 首次推出了一款新的用於建立移動應用的開源庫——Flutter;

2018 年初,Google 釋出了 Flutter 的第一個 beta 版本;

在今年 5 月的 Google I/O 大會上,Flutter 更新到了 beta 3 版本;

今天,Flutter 釋出了首個預覽版,這意味著 Flutter 進入了正式版(1.0)釋出前的最後階段。

觀其發展,就在上個月,Flutter 進入了 GitHub stars 排行榜前 100 名,如今已有 27k 個 star。經歷了短短一年的時間,Flutter 生態系統得以快速增長,活躍的 Flutter 使用者也增長了 50%。由此可見,Flutter 在開發者中受到了熱烈的歡迎,其未來的發展不容小覷。

640?wx_fmt=png

Flutter 的優勢

為何自 Flutter 釋出以來,受到了諸多開發者較高的評價?自然與其優點息息相關:

高生產率:

  • 一套程式碼可以開發出 Android 和 iOS 應用;

  • 使用更少的程式碼實現更多的功能,即使在單一的作業系統之上,使用更現代的、更具有表達性的開發語言及宣告方法,也可以完成更多的功能;

  • 開發原型和迭代更加方便;

  • 在應用執行的時候就可以修改程式碼並重新載入(使用熱過載)修改後的功能;

  • 直接修改崩潰的 bug,然後繼續從崩潰的地方執行除錯;

建立優雅的、可定製的使用者介面:

  • Flutter 內建了對紙墨設計(Material Design)的支援,提供了豐富的 UI 控制元件庫可以用來建立紙墨設計風格的 UI;

  • 提供了可定製的 UI 框架,不再受制於手機平臺控制元件的支援。

使用 Flutter 可以幹什麼?

快速開發:

Flutter 的熱過載可幫助使用者快速地進行測試、構建 UI、新增功能並更快地修復錯誤。在 iOS 和 Android 模擬器或真機上可以在亞秒內過載,並且不會丟失狀態。

640?wx_fmt=gif

富有表現力,漂亮的使用者介面:

使用 Flutter 內建美麗的 Material Design 和 Cupertino(iOS風格)widget、豐富的 motion API、平滑而自然的滑動效果和平臺感知,為開發者帶來全新體驗。

640?wx_fmt=png

現代的,響應式框架

使用 Flutter 的現代、響應式框架,和一系列基礎 widget,輕鬆構建您的使用者介面。使用功能強大且靈活的 API(針對 2D、動畫、手勢、效果等)解決艱難的 UI 挑戰。

class CounterState extends State<Counter{
  int counter = 0;

  void increment() {
    // 告訴Flutter state已經改變, Flutter會呼叫build(),更新顯示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 當 setState 被呼叫時,這個方法都會重新執行.
    // Flutter 對此方法做了優化,使重新執行變的很快
    // 所以你可以重新構建任何需要更新的東西,而無需分別去修改各個widget
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

訪問本地功能和SDK

通過平臺相關的 API、第三方 SDK 和原生程式碼讓開發者的應用變得強大易用。 Flutter 允許開發者複用現有的 Java、Swift 或 ObjC 程式碼,訪問 iOS 和 Android 上的原生系統功能和系統 SDK。

訪問平臺功能非常簡單。以下是 interop example(互操作示例)中的一個片段:

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

統一的應用開發體驗

Flutter 擁有豐富的工具和庫,可以輕鬆地同時在 iOS 和 Android 系統中實現開發者想要完成的功能。即使開發者沒有任何的移動端開發體驗, Flutter 也是一種輕鬆快捷的方式來構建漂亮的移動應用程式。 如果開發者已是一位經驗豐富的 iOS 或 Android 開發人員,則可以使用 Flutter 作為檢視(View)層, 並可以使用已經用 Java / ObjC / Swift 完成的部分(Flutter 支援混合開發)。

Flutter 首個預覽版的釋出

目前 Flutter 已釋出了第一個預覽版。此次,Flutter 開發團隊主要專注於讓 Flutter 適用於更多的應用場景,並修復 Bug 並讓 Flutter 更加穩定。其中相比 beta 3 主要更新包括:

  • 增加了對帶有 ARMv7 指令集晶片的 32 位 iOS 裝置的支援,使得 Flutter 相容包括 iPad Mini 和 iPhone 5c 在內的更多裝置;

  • 完善了 video player package 以支援更多的視訊格式並變得更穩定;

  • 支援了 Firebase 動態連結(Dynamic Links)以支援跨平臺建立和處理連結;

  • 並進一步改進如何將 Flutter 小部件新增到現有 Android 和 iOS 應用的文件。

除此之外,Visual Studio Code 的 Flutter 擴充套件新版本帶來了新的大綱檢視,語句完成以及直接從 Visual Studio Code 啟動模擬器等功能。

640?wx_fmt=png

Flutter 預覽版也從社群中得到了很多支援,來自外部的貢獻就包括 Flutter 對硬體鍵盤和條形碼掃描器、視訊錄製、影象的支援。此外,還有許多新軟體包對 Flutter 包站點的貢獻,例如 Flutter Platform Widgets,一組可自適應 iOS 或 Android 的小部件; mlkit,Firebase MLKit API 的包裝類(wrapper); 序列動畫(Sequence Animation)。

那麼該如何更新呢?

如果你已經在 beta channel 上了,只需要執行一句命令:

$ flutter upgrade

如何更快上手學習 Flutter?

就國內而言,使用 Flutter 的使用者僅次於美國和印度,擁有世界第三多的 Flutter 使用者。國內科技巨頭中,阿里巴巴基於 Flutter 開發的應用程式已經有了上千萬安裝量,騰訊也將使用 Flutter 推出 NOW 直播手機客戶端。那麼國內的開發者該如何快速上手 Flutter?

對此,Flutter 團隊正式釋出了中文  Flutter 網站:https://flutter-io.cn/。其中包含了源自社群的許多中文 Flutter 資料,從而幫助國內開發者更好地使用 Flutter。

640?wx_fmt=png

此外,還可以通過以下資源進行深入瞭解:

  • I/0 分享視訊:https://www.youtube.com/playlist?list=PL0o58xSX-Jvi6zBDe7SW4W6h5hauQ-xxF

  • 技術週刊:https://flutterweekly.net/

  • 實踐視訊:https://www.youtube.com/watch?v=syd0c9Vi2hg

  • 開發視訊:https://www.youtube.com/watch?v=yr8F2S3Amas

  • Github 地址:https://github.com/flutter/flutter

  • Flutter 網站:https://flutter.io/

  • Flutter - 不一樣的跨平臺解決方案:https://juejin.im/post/5afd77466fb9a07aab2a12da

  • Flutter 初嘗:從 Java 無縫過渡:http://wuxiaolong.me/2018/03/08/Flutter/

  • 最近用 Flutter 做了幾個 APP:https://zhuanlan.zhihu.com/p/37232700

  徵稿啦!

CSDN 公眾號秉持著「與千萬技術人共成長」理念,不僅以「極客頭條」、「暢言」欄目在第一時間以技術人的獨特視角描述技術人關心的行業焦點事件,更有「技術頭條」專欄,深度解讀行業內的熱門技術與場景應用,讓所有的開發者緊跟技術潮流,保持警醒的技術嗅覺,對行業趨勢、技術有更為全面的認知。如果你有優質的文章,或是行業熱點事件、技術趨勢的真知灼見,或是深度的應用實踐、場景方案等的新見解,歡迎聯絡 CSDN 投稿,聯絡方式:微信(guorui_1118,請備註投稿+姓名+公司職位),郵箱([email protected])。

————— 推薦閱讀 —————

點選圖片即可閱讀

640?wx_fmt=jpeg

640?wx_fmt=jpeg

640?wx_fmt=jpeg

640?wx_fmt=png

640?wx_fmt=gif