Flutter 初嘗:從 Java 無縫過渡

吳小龍同學發表於2018-03-09

準備階段

下載 Flutter SDK

新建 Flutter 資料夾,克隆 Flutter SDK:

git clone -b beta https://github.com/flutter/flutter.git
複製程式碼

配置 Flutter 環境

我是 Mac 系統,Flutter SDK 下載完後的路徑:Users/wuxiaolong/Flutter/flutter/ 。

在命令列下,進入使用者目錄

cd $HOME
複製程式碼

開啟.bash_profile檔案

執行命令開啟檔案:

open -e .bash_profile
複製程式碼

開啟檔案後,新增 Flutter SDK 安裝的路徑:

export PATH=${PATH}:/Users/wuxiaolong/Flutter/flutter/bin:$PATH
複製程式碼

更新剛配置的環境變數

source .bash_profile
複製程式碼

驗證

終端直接輸入 flutter,沒有提示該命令找不到,則配置成功。

flutter doctor

命令列輸入flutter doctor,安裝 Futter 剩餘依賴項。

安裝 Flutter 和 Dart 外掛

啟動 Android Studio,搜尋 Flutter 外掛並單擊 install,系統提示您安裝 Dart 外掛,點選 Yes 安裝即可。

提示:安裝 Dart 外掛可能會提示下載失敗,多試幾次。

第一個專案

Android Studio - File - New - New Flutter Project,等待建立成功後,執行效果如下:

Flutter 初嘗:從 Java 無縫過渡

Dart 基本語法

Flutter 開發語言是 Dart,這個語言相信我們做原生 Android 的都能看懂,我在學習過程,感覺這不就是 Java 嘛,我直接按照 Java 思維去寫,完全沒問題。

  1. 基礎資料型別有 int、double、bool、String、List(陣列)、Map;

  2. 宣告變數可以使用 var,也可以使用 const 和 final;

  3. const 和 final 定義的都是常量,值不能改變,並且在宣告的時候就必須初始化,這是可以省略 var 或者其他型別;

  4. 函式可以有可選引數;

  5. if-else、for 迴圈、while 迴圈、switch-case、try-catch 等知識與 Java 類似;

更多詳見官網:https://www.dartlang.org/

練手

這裡使用了豆瓣電影的 API,功能很簡單,就一個列表和詳情。

效果預覽

Flutter 初嘗:從 Java 無縫過渡

遇到問題

學習新知識,第一步就是模仿,多看,多想,多實踐,在這個過程我遇到一些問題:

  1. Flutter 怎麼列印資訊?print('onclick');

  2. Flutter 如何看報錯資訊?在 Android Studio 底欄 Run 非 LogCat;

  3. 網路請求怎麼寫?

  4. 介面資料如何解析的?

  5. 如何一進頁面就請求介面?

  6. 網路圖片怎麼顯示?

  7. ListView 官網介紹的 Item 是通用的,如何定製?

  8. 跳轉頁面如何傳參?傳參後怎麼用?

等等,遇到一個問題,消滅一個。

原始碼

原始碼地址

https://github.com/WuXiaolong/flutter_movie ,該專案起始頁面在 lib/main.dart,注意的點我也都加了註釋,去吧,學習還是要靠自己,踏出第一步,實踐起來。

如何匯入 Flutter 專案

下載 Flutter 專案

下載完 Flutter 專案,直接 Android Studio - Open。

配置 Flutter SDK

Flutter 初嘗:從 Java 無縫過渡
如圖,點選 Open Flutter setting,點選下拉按鈕,選擇 Flutter SDK 路徑,點選 OK,會自動配置 Dart SDK 路徑。

pubspec.yaml 下載庫

Flutter 初嘗:從 Java 無縫過渡
如圖,點選 Packages get,下載專案用到的依賴庫,編譯完成應該就能正常執行了。

最後

  1. 還是被 Flutter 驚豔到了,重拾當初學習 Android 的熱情,卻一不小心,我的肩痛又開始了;

  2. Flutter UI 全是程式碼寫的,不是 XML,複雜的 UI 實現有難度;

  3. Flutter 聯想功能較弱,需要先匯入相應的包,才有相應的類聯想;

  4. 新建了一個 package,將 dart 檔案拖入,相關聯包的路徑會相應修改,但是我改了package 名,就無法相應修改,bug?

  5. Flutter,我感覺可以從 Java 實現無縫過度;

  6. I'm a iOS Developer.

  7. Flutter 開源庫遠沒有原生的豐富,目前還是 Beta 版,還是很值得期待,我會持續關注學習,先就醬紫吧。

相關閱讀

Flutter 官網

Mac 配置 adb 環境、gradlew:command not found

FlutterMates

公眾號

我的公眾號:吳小龍同學,歡迎交流~

Flutter 初嘗:從 Java 無縫過渡

相關文章