Flutter 初嘗:從 Java 無縫過渡

準備階段

下載 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

命令行輸入<code>flutter doctor/<code>,安裝 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 怎麼打印信息?<code>print('onclick');/<code>

  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


分享到:


相關文章: