準備階段
下載 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,等待建立成功後,執行效果如下:
Dart 基本語法
Flutter 開發語言是 Dart,這個語言相信我們做原生 Android 的都能看懂,我在學習過程,感覺這不就是 Java 嘛,我直接按照 Java 思維去寫,完全沒問題。
-
基礎資料型別有 int、double、bool、String、List(陣列)、Map;
-
宣告變數可以使用 var,也可以使用 const 和 final;
-
const 和 final 定義的都是常量,值不能改變,並且在宣告的時候就必須初始化,這是可以省略 var 或者其他型別;
-
函式可以有可選引數;
-
if-else、for 迴圈、while 迴圈、switch-case、try-catch 等知識與 Java 類似;
更多詳見官網:https://www.dartlang.org/
練手
這裡使用了豆瓣電影的 API,功能很簡單,就一個列表和詳情。
效果預覽
遇到問題
學習新知識,第一步就是模仿,多看,多想,多實踐,在這個過程我遇到一些問題:
-
Flutter 怎麼列印資訊?
print('onclick');
-
Flutter 如何看報錯資訊?在 Android Studio 底欄 Run 非 LogCat;
-
網路請求怎麼寫?
-
介面資料如何解析的?
-
如何一進頁面就請求介面?
-
網路圖片怎麼顯示?
-
ListView 官網介紹的 Item 是通用的,如何定製?
-
跳轉頁面如何傳參?傳參後怎麼用?
等等,遇到一個問題,消滅一個。
原始碼
原始碼地址
https://github.com/WuXiaolong/flutter_movie ,該專案起始頁面在 lib/main.dart,注意的點我也都加了註釋,去吧,學習還是要靠自己,踏出第一步,實踐起來。
如何匯入 Flutter 專案
下載 Flutter 專案
下載完 Flutter 專案,直接 Android Studio - Open。
配置 Flutter SDK
如圖,點選 Open Flutter setting,點選下拉按鈕,選擇 Flutter SDK 路徑,點選 OK,會自動配置 Dart SDK 路徑。pubspec.yaml 下載庫
如圖,點選 Packages get,下載專案用到的依賴庫,編譯完成應該就能正常執行了。最後
-
還是被 Flutter 驚豔到了,重拾當初學習 Android 的熱情,卻一不小心,我的肩痛又開始了;
-
Flutter UI 全是程式碼寫的,不是 XML,複雜的 UI 實現有難度;
-
Flutter 聯想功能較弱,需要先匯入相應的包,才有相應的類聯想;
-
新建了一個 package,將 dart 檔案拖入,相關聯包的路徑會相應修改,但是我改了package 名,就無法相應修改,bug?
-
Flutter,我感覺可以從 Java 實現無縫過度;
-
I'm a iOS Developer.
-
Flutter 開源庫遠沒有原生的豐富,目前還是 Beta 版,還是很值得期待,我會持續關注學習,先就醬紫吧。
相關閱讀
Mac 配置 adb 環境、gradlew:command not found
公眾號
我的公眾號:吳小龍同學,歡迎交流~