Flutter入門學習：Flutter簡介以及在macOS上搭建Flutter開發環境

年糕媽媽技術團隊發表於2018-11-22

前言

眾所周知，一個移動客戶端一般都會有iOS和Android兩個版本，作為一個移動端的開發人員你肯定有過這樣的想法：能不能有個程式語言直接寫一套程式碼可以直接在iOS和Android系統上執行呢？現在這個問題已經得到解決，Google推出的Flutter，可以快速在iOS和Android上構建高質量的原生使用者介面，下面跟著小編認識一下Flutter吧！

正文

什麼是Flutter

什麼是Flutter呢？官網文件是這樣介紹的：Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。由此可見移動開發人員可以直接使用Flutter直接開發iOS和Android客戶端了。

Flutter的優勢

高效率、快速開發

統一的應用開發體驗，一套程式碼可以同時開發iOS和Android應用
Flutter的熱過載可幫助您快速地進行測試、構建UI、新增功能並更快地修復錯誤，修復崩潰時可以從應用程式停止的位置繼續除錯，大大減少開發和debug的時間
訪問本地功能和SDK，Flutter允許您複用現有的Java、Swift或ObjC程式碼，訪問iOS和Android上的原生系統功能和系統SDK
現代的，響應式框架，和一系列基礎widget，輕鬆構建您的使用者介面。使用功能強大且靈活的API解決艱難的UI挑戰

富有表現力，漂亮的使用者介面

Flutter內建的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果和平臺感知, 使應用介面更加漂亮，互動更加人性化

安裝Flutter

系統要求

Windows

作業系統：Windows 7 或更高版本 (64-bit)
磁碟空間：400 MB (不包括Android Studio的磁碟空間)
工具：Flutter 依賴下面這些命令列工具(Git for Windows (Git命令列工具))

macOS

作業系統：macOS (64-bit)
磁碟空間：700 MB (不包括Xcode或Android Studio的磁碟空間）
工具： Flutter 依賴下面這些命令列工具 (bash, mkdir, rm, git, curl, unzip, which)

Linux

作業系統：Linux (64-bit)
磁碟空間：600 MB (不包括Android Studio的磁碟空間).
工具：Flutter 依賴下面這些命令列工具(bash, mkdir, rm, git, curl, unzip, which)

在macOS上搭建Flutter開發環境

1.獲取Flutter SDK

去Flutter官網下載其最新可用的安裝包，下載地址。下載的時候可能需要翻牆，小夥伴們也可以去Flutter github下載安裝包下載地址。
在這裡小編直接用git下載安裝包，並新增Flutter到path中：

git clone -b beta https://github.com/flutter/flutter.gitexport PATH=`pwd`/flutter/bin:$PATH複製程式碼

執行flutter doctor

當時小編報了很多錯，看的小編一臉懵逼，但是按著提示一步步來安裝最後還成功了。分享一個小編遇到的問題：在更新libimobiledevice的時候報了一個“Requested ‘libusbmuxd >
= 1.1.0′ but version of libusbmuxd is 1.0.10”的錯，最後按照以下方法解決，參考
```
brew update brew uninstall --ignore-dependencies libimobiledevice brew uninstall --ignore-dependencies usbmuxd brew install --HEAD usbmuxd brew unlink usbmuxd brew link usbmuxd brew install --HEAD libimobiledevice複製程式碼
```

Android Studio配置

下載安裝Android Studio，3.0或者更高版本
啟動Android Studio，然後執行“Android Studio安裝嚮導”
在Preferences>
Plugins中搜尋Flutter並點選 install
安裝完成之後重啟Android Studio

安裝flutter的Android Studio啟動之後

現在Android Studio已經配置成功讓我們建立一個Flutter應用吧
1. 選擇 File>
  New Flutter Project
2. 選擇 Flutter application 作為 project 型別, 然後點選 Next
3. 輸入專案名稱 (如 myFirstFlutterApp),選擇儲存路徑，然後點選 Finish
4. 等待Android Studio安裝SDK並建立專案.6.執行，可以執行到模擬器也可以執行到手機上，下面是小編執行到手機上的截圖
  
  至此，我們的Flutter環境已經安裝好了，Android Studio也配置成功。