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

年糕媽媽技術團隊發表於2018-11-22
FlutterMac開發環境

前言

眾所周知，一個移動客戶端一般都會有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

系統要求

  1. Windows
  • 作業系統：Windows 7 或更高版本 (64-bit)
  • 磁碟空間：400 MB (不包括Android Studio的磁碟空間)
  • 工具：Flutter 依賴下面這些命令列工具(Git for Windows (Git命令列工具))
  1. macOS
  • 作業系統：macOS (64-bit)
  • 磁碟空間：700 MB (不包括Xcode或Android Studio的磁碟空間）
  • 工具： Flutter 依賴下面這些命令列工具 (bash, mkdir, rm, git, curl, unzip, which)
  1. Linux
  • 作業系統：Linux (64-bit)
  • 磁碟空間：600 MB (不包括Android Studio的磁碟空間).
  • 工具：Flutter 依賴下面這些命令列工具(bash, mkdir, rm, git, curl, unzip, which)

在macOS上搭建Flutter開發環境

1.獲取Flutter SDK

  1. 去Flutter官網下載其最新可用的安裝包，下載地址。下載的時候可能需要翻牆，小夥伴們也可以去Flutter github下載安裝包下載地址。
  2. 在這裡小編直接用git下載安裝包，並新增Flutter到path中：
git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
複製程式碼
  1. 執行flutter doctor
    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配置

  1. 下載安裝Android Studio，3.0或者更高版本

  2. 啟動Android Studio，然後執行“Android Studio安裝嚮導”

  3. 在Preferences>Plugins中搜尋Flutter並點選 install

  4. 安裝完成之後重啟Android Studio

    flutter
    install
    安裝flutter的Android Studio啟動之後
    Flutter入門學習：Flutter簡介以及在macOS上搭建Flutter開發環境
    現在Android Studio已經配置成功讓我們建立一個Flutter應用吧

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

總結

安裝和和配置都不太麻煩，只要細心、耐心應該都沒什麼難度，主要是翻牆太難受了，小編也是從零開始學習歡迎大家指正。

參考和學習資源

  1. Flutter中文學習官網
  2. Flutter官網

相關文章