mac上搭建flutter開發環境並運行第一個程序

什麼是flutter

官方是這麼解釋的:Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。(閒魚APP就是用的flutter)

一、安裝flutter

#切換到準備安裝flutter的目錄
cd project
#有兩種方法安裝flutter SDK
#1、使用git clone
git clone -b beta https://github.com/flutter/flutter.git
#2、直接在github下載壓縮包,下載地址https://github.com/flutter/flutter/releases
#在目錄下解壓zip文件
#配置環境
export PATH=`pwd`/flutter/bin:$PATH 
#如果下載太慢或者失敗,那麼需要先配置中國鏡像,然後再clone項目
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#切換到項目目錄
cd ./flutter
flutter doctor

不出意外的話,應該會報錯,提示你安裝android studio、Xcode、install dart和flutter插件等。按照提示逐個安裝就行。
需要注意的是,你可能會遇見pod setup這個步驟,但是卻一直卡着進度條不動,快速的解決辦法是,打開手機熱點,mac連接手機的熱點進行下載安裝,5分鐘內能夠安裝好(大小應該在500多M)

二、安裝android studio及插件

android studio 下載地址
切換到對應的平臺

打開android studio, 打開plugin
image.png

輸入flutter搜索,點擊中間的 Search in repositories
image.png
點擊install,順利的話安裝完畢之後重啓android studio

三、運行第一個項目

新建一個Flutter
打開android studio後 會看到可選項多了一個 Start a new Flutter project
image.png
創建成功後在終端中輸入open -a Simulator則可以啓動ios模擬器,然後在android studio 控制檯中輸入 flutter run 就能夠看到安卓真機和ios模擬器了
{7A7E8808-E6A9-39AC-1E02-B9CE009E1E53}.png
flutter run -d <設備id>就能夠啓動對應的平臺了
如我這裏啓動ios模擬器就輸入

flutter run -d B21

ios上的效果

和運行android項目一樣的操作流程,連接安卓真機後在手機上能看到默認的項目
安卓上的效果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章