Flutter初體驗--MAC系統Flutter安裝使用

Flutter是什麼？

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

  Flutter組件採用現代響應式框架構建，這是從React中得到的靈感，中心思想是用組件(widget)構建你的UI。 組件描述了在給定其當前配置和狀態時他們顯示的樣子。當組件狀態改變，組件會重構它的描述(description)，Flutter會對比以前的描述， 以肯定底層渲染樹從當前狀態轉換到下一個狀態所須要的最小更改。   好多小夥伴都在推薦這個框架，因此我決定也來湊一湊熱鬧，順便把本身的安裝過程分享記錄下來。

一、在macOS上搭建Flutter開發環境

  官方文檔看這裏

使用鏡像

  因爲在國內訪問Flutter有時可能會受到限制，Flutter官方爲中國開發者搭建了臨時鏡像，你們能夠將以下環境變量加入到用戶環境變量中(打開終端執行下面命令)：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

獲取Flutter SDK

  這裏我直接使用git clone命令(YOURPATH爲你FlutterSDK安裝目錄 替換成你想要安裝的路徑):

cd YOURPATH
git clone -b dev https://github.com/flutter/flutter.git
複製代碼

  添加flutter相關工具到path中：

export PATH=`pwd`/flutter/bin:$PATH
複製代碼

  運行Flutter doctor命令查看是否須要安裝其它依賴項來完成安裝，這一步須要的時間可能會特別長要有耐心、要有耐心、要有耐心，重要的事說三遍，我用了三天 - -。

flutter doctor
複製代碼

  該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能須要安裝的其餘軟件或進一步須要執行的任務（以粗體顯示）

  例如:

  [-] Android toolchain - develop for Android devices

  • Android SDK at /Users/obiwan/Library/Android/sdk

   ✗ Android SDK is missing command line tools; download from goo.gl/XxQghQ

   • Try re-installing or updating your Android SDK,

   visit flutter.io/setup/#andr… for detailed instructions.   雖然我也出現這個顯示，由於我不打算用Android SDK運行因此先忽略了。

更新環境變量

  您在命令行只能更新當前會話的PATH變量，如Clone Flutter repo所示。 可是，您可能須要的是永久更新此變量，以便您能夠運行flutter命令在任何終端會話中。

  對於全部終端會話永久修改此變量的步驟是和特定計算機系統相關的。一般，您會在打開新窗口時將設置環境變量的命令添加到執行的文件中。例如   一、肯定您Flutter SDK的目錄，您將在步驟3中用到。   二、打開(或建立) $HOME/.bash_profile. 文件路徑和文件名可能在您的機器上不一樣.   三、添加如下行並更改[PATH_TO_FLUTTER_GIT_DIRECTORY]爲克隆Flutter的git repo的路徑:   以個人計算機安裝路徑爲例（個人flutter安裝路徑： /Users/chaojiwandianshang/Software）：

cd /Users/chaojiwandianshang/Software
 vim .bash_profile
複製代碼

  將如下寫進bash_profile文件：

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶須要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶須要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
複製代碼

   :wq退出並保存

  用Xcode啓動你的Flutter程序

若是你的電腦正常安裝xcode直接運行open -a Simulator 啓動模擬器

open -a Simulator
複製代碼

二、配置編輯器

  官方文檔看這裏   目前官方推薦的編輯器有Android Studio、VS Code、IntelliJ，我選擇的是VS Code：

安裝 VS Code

• VS Code, 安裝1.20.1或更高版本.

  安裝Flutter插件

  1. 啓動 VS Code

  2. 調用 View>Command Palette…

  3. 輸入 ‘install’, 而後選擇 Extensions: Install Extension action

  4. 在搜索框輸入 flutter , 在搜索結果列表中選擇 ‘Flutter’, 而後點擊 Install

  5. 選擇 ‘OK’ 從新啓動 VS Code

經過Flutter Doctor驗證您的設置

  1. 調用 View>Command Palette…

  2. 輸入 ‘doctor’, 而後選擇 ‘Flutter: Run Flutter Doctor’ action

  3. 查看「OUTPUT」窗口中的輸出是否有問題

三、體驗

  官方文檔看這裏

建立新的應用

  1. 啓動 VS Code

  2. 調用 View>Command Palette…

  3. 輸入 ‘flutter’, 而後選擇 ‘Flutter: New Project’ action

  4. 輸入 Project 名稱 (如myapp), 而後按回車鍵

  5. 指定放置項目的位置，而後按藍色的肯定按鈕

  6. 等待項目建立繼續，並顯示main.dart文件

  上述命令建立一個Flutter項目，項目名爲myfrstflutterdemo，其中包含一個使用Material 組件的簡單的演示應用程序。

  在項目目錄中，您的應用程序的代碼位於 lib/main.dart.

運行應用程序

  調用Debug>Start Debugging

  等待應用程序啓動

  若是一切正常，在應用程序建成功後，您應該在您的設備或模擬器上看到應用程序:

體驗熱重載

  Flutter 能夠經過 熱重載（hot reload） 實現快速的開發週期，熱重載就是無需重啓應用程序就能實時加載修改後的代碼，而且不會丟失狀態（譯者語:若是是一個web開發者，那麼能夠認爲這和webpack的熱重載是同樣的）。簡單的對代碼進行更改，而後告訴IDE或命令行工具你須要從新加載（點擊reload按鈕），你就會在你的設備或模擬器上看到更改。

  用你喜歡的編輯器打開文件lib/main.dart將字符串 'You have pushed the button this many times:' 更改成   'You have clicked the button this many times:'   不要按「中止」按鈕; 讓您的應用繼續運行.   要查看您的更改，請調用 Save (cmd-s / ctrl-s), 或者點擊 熱重載按鈕 (綠色圓形箭頭按鈕).   你會當即在運行的應用程序中看到更新的字符串

  好了，到如今爲止一個簡單Flutter的Demo就運行起來了，接下來開啓咱們的Flutter學習之旅吧！