Hello Flutter!-哎！你環境配了嗎？

前言

技術的更新迭代愈來愈快，一直都有原生開發被取代的聲音，做爲一個純原生開發者來講，跨平臺開發，是一種新的嘗試。爲何要選擇 Flutter ，由於畢竟是谷爹的親兒子, Android 也是親兒子，提及來也都是兄弟，加深下兄弟之間純真的友誼，仍是頗有頗有必要的。

Flutter 是什麼？

Flutter 是谷歌的移動 UI 框架，能夠快速在 iOS 和 Android 上構建高質量的原生用戶界面。 Flutter 能夠與現有的代碼一塊兒工做。在全世界，Flutter 正在被愈來愈多的開發者和組織使用，而且 Flutter 徹底免費、而且開源，對開發者十分友好。

上面是我從官網上摘抄來的，總結來講，我只記住了三個關鍵詞：

• 熱重載
• 跨平臺
• UI框架

相信接下來學習中會逐漸體驗這幾點。接下來開始第一步配置 Flutter 開發環境。

準備 Flutter 開發環境

Flutter 能夠選擇純命令方式開發，也能夠選擇 IDE ，IDE 可使用 Android Studio，Xcode，VScode 等等，畢竟使用 IDE 開發比較直觀，因此我選擇了已經安裝的 Android Studio。可是不管是那種方式開發，都須要下載 Flutter SDK，因此配置的步驟爲：

1. 下載 Flutter SDK。
2. 配置 Flutter 環境變量
3. IDE 安裝 Flutter 相關插件

下載 Flutter SDK

因爲在國內訪問有時可能會受到限制，Flutter 官方爲中國開發者搭建了臨時鏡像，你們能夠將以下環境變量加入到電腦用戶環境變量中：

# Flutter鏡像 國內用戶須要設置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

配置 Flutter 環境變量

# Flutter命令行工具
export PATH=<yourpath>/flutter/bin:$PATH

# 注意要將 <yourpath> 換成本身的地址，例如個人：
export PATH=/Users/duanrui/Documents/youzan/flutter/flutter/bin:$PATH

複製代碼

Android Studio 安裝插件。

須要安裝的插件有兩個：flutter 和 dart，安裝以後須要重啓Android Studio 使插件生效。

安裝以後須要重啓 Android Studio 使插件生效，生效後開始頁面出現 New Flutter project 選項,

從 Hello World 開始

環境配置好了，如今能夠開始編寫咱們的第一個 Flutter 項目了。點擊 New Flutter project ,起個你喜歡的名字，下一步，直到項目建立成功。

項目結構以下：

暫時不要管它是爲啥這樣，運行起來先。

• 選擇一個設備，我選擇建立了一個 Android 模擬器
• 選擇 main.dart
• Just Run！

運行成功後，會在模擬器上看到這樣的畫面：

若是失敗了，沒有關係，成功過程當中不可避免會遇到種種磨難，下面記錄了不少人都遇到的幾個問題：

1.一直在Initializing gradle... ,彷彿卡住了。

緣由：偉大的牆阻隔了 gradle 的下載。 解決：將項目依賴的 gradle 版本換成本地已下載的版本。

若是不記得本地已下載的 Gradle 版本是什麼，能夠經過如下的方法查看：

方法一：打開以前的項目，查看該項目的 gradle 版本配置。

方法二：Android Studio 中新建項目成功後會自動下載項目中定義版本的Gradle，存儲在制定目錄中，去這個目錄就能夠看到，有的同窗可能有不少個版本，選擇其中一個就行了，推薦選擇其中最新的版本，比較靠譜。 Mac平臺默認下載目錄： /Users/<username>/.gradle/wrapper/dists Win平臺默認下載目錄：C:\Users\<username>.gradle\wrapper\dists

2.一直在Resolving dependencies...，彷彿又卡住了。 緣由：是的，仍是偉大的牆，此次阻隔的是下載依賴的倉庫地址。 解決：將倉庫地址換成阿里雲的鏡像地址。

//        google()
//        jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

複製代碼

開始體驗 Flutter

通過上個步驟，第一個 Flutter 項目已經成功運行了，如今來體驗下 Flutter 的幾個特點功能：

熱重載

1.修改 main.dart 文件中一個字符串

2.保存代碼或點擊熱重載按鈕 (就是閃電⚡️按鈕)，而後發現模擬器上面的頁面也自動變化了，並且是保存着我以前操做的狀態，數字仍然爲 4，不是初始化的 0。

從 Console 窗口中的運行日誌中，看出以上操做就是熱重載過程。

跨平臺

以上是 Android 設備上的展示，在 iOS 設備 iPhone XR上的運行效果是這個樣紙的，看下面：

基本上是如出一轍的，沒有改動任何代碼，就達到了兩個平臺UI和邏輯的統一。

MAC OS 上部署到 iOS設備的步驟：

1. 下載安裝 Xcode
2. 配置 Xcode 命令行工具

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 
複製代碼

3. 運行如下命令，安裝 libimobiledevice，這是一個橫跨 Mac,Windows,Linux三大桌面平臺的非官方版本USB接口協議庫，能夠用它來管理鏈接的iOS設備。

brew update   
brew install --HEAD libimobiledevice   
brew install ideviceinstaller ios-deploy cocoapods   
pod setup
複製代碼

4. 打開一個 iOS 模擬器，若是順利， Android Studio 的設備列表已經能夠看到剛纔打開的 iOS 設備了。 已經安裝了Xcode，iOS模擬器不須要另外再安裝，命令行打開 iOS 設備的步驟是：

//列出你安裝的全部可用的設備
xcrun instruments -s
//開啓指定模擬器
xcrun instruments -w "iPhone XR (12.1)"
複製代碼

5. 選擇 iOS 設備，運行項目。

過程當中若是遇到其餘問題，運行命令行 flutter doctor -v 和網絡搜索基本都能解決。

UI框架

Flutter 提供了不少組件，能夠很輕鬆實現不少漂亮的 UI 設計，這一點，相信在後面的學習中，能夠慢慢體驗到。

結語

以上就是所有內容了，Flutter 的基礎開發環境已經配置完畢，接下來會經過一些簡單的頁面小 Demo 去了解更多的知識，有興趣的能夠一塊兒學習哈，下篇文章見。

---

歡迎關注我的微信公衆號，最新的博客，好玩的事情，都會在上面分享，期待與你共同成長。