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

NO IMAGE

前言

眾所周知,一個移動客戶端一般都會有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入門學習:Flutter簡介以及在macOS上搭建Flutter開發環境

    當時小編報了很多錯,看的小編一臉懵逼,但是按著提示一步步來安裝最後還成功了。分享一個小編遇到的問題:在更新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入門學習:Flutter簡介以及在macOS上搭建Flutter開發環境
    Flutter入門學習:Flutter簡介以及在macOS上搭建Flutter開發環境

    安裝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.運行,可以運行到模擬器也可以運行到手機上,下面是小編運行到手機上的截圖

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

      至此,我們的Flutter環境已經安裝好了,Android Studio也配置成功。

總結

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

參考和學習資源

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

相關文章

IntelliJIDEA的這個接口調試工具真是太好用了!

讀《CleanCode代碼整潔之道》之感悟

跨表查詢經常有,何為跨表更新?

我的2019歸零,2020走你