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

命令行輸入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 思惟去寫，徹底沒問題。

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，功能很簡單，就一個列表和詳情。

效果預覽

遇到問題

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

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

如圖，點擊 Open Flutter setting，點擊下拉按鈕，選擇 Flutter SDK 路徑，點擊 OK，會自動配置 Dart SDK 路徑。

pubspec.yaml 下載庫

如圖，點擊 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

公衆號

個人公衆號：吳小龍同窗，歡迎交流～