image.png

一、準備工作

1珠漂、升級Macos系統(tǒng)為最新系統(tǒng)
2晚缩、安裝最新的Xcode
3尾膊、電腦上面需要安裝brew：https://brew.sh/

二、下載Flutter荞彼、配置Flutter環(huán)境變量冈敛、配置Flutter鏡像

1、下載Flutter SDK
flutter官網
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

image.png

/Users/zhuge/flutter_mac/flutter

最終效果圖：

image.png

3抓谴、把Flutter安裝目錄的bin目錄配置到環(huán)境變量，然后把Flutter國內鏡像也配置到環(huán)境變量里面寞缝，在終端執(zhí)行

$vim ~/.bash_profile

插入

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/zhuge/flutter_mac/flutter/bin:$PATH

其中"/Users/zhuge/flutter_mac/flutter"為下載的flutterSDK中的內容拷貝到的目標路徑癌压。
按ESC退出編輯界面,保存編輯的信息,需要執(zhí)行":wq"保存退出。到此環(huán)境變量配置完成荆陆。

image.png

之后在終端執(zhí)行下面命令滩届，使環(huán)境變量執(zhí)行生效。

$source ~/.bash_profile

如果出現類似下面的錯誤

image.png

export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin

接下來就可以正常使用vim ~/.bash_profile，并且重新編輯配置信息
4浓体、驗證flutter環(huán)境變量是否配置成功泡挺，執(zhí)行

$flutter -v

或者

$flutter -h

獲取flutter的幫助信息，如果出現一些常用的flutter命令,則代表上面的配置執(zhí)行成功,否則檢查下是否拷貝的flutterSDK是否下載完整,我這里下載下來是一百多兆,檢查下拷貝到的目標路徑是否正確.

三汹碱、運行flutter doctor命令檢測環(huán)境

$flutter doctor

該命令檢查您的環(huán)境并在終端窗口中顯示報告粘衬。Dart SDK已經在捆綁在Flutter里了，沒有必要單獨安裝Dart咳促。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執(zhí)行的任務（以粗體顯示）

image.png

這里只處理ios部分,上面的提示已經很明顯了,只需要按照上面的提示一個個執(zhí)行下面的

$brew update
$brew install --HEAD usbmuxd
$brew link usbmuxd
$brew install --HEAD libimobiledevice
$brew install ideviceinstaller
$brew install ios-deploy
$brew install cocoapods
$pod setup

如果電腦上面沒有安裝brew的話,第一步需要安裝brew

$/usr/bin/ruby -e  "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

執(zhí)行最后一個命令時,如果出現了

image.png

網上查閱說是需要執(zhí)行下面的

$sudo gem install --user-install executable-hooks

但又報錯下面信息

image.png

嘗試執(zhí)行

$rvm -v

提示下面信息

image.png

只能重新安裝rvm

$curl -L get.rvm.io | bash -s stable
$source ~/.rvm/scripts/rvm 
$rvm -v
$ruby -v 

image.png

執(zhí)行完一切正常,再次執(zhí)行pod setup

image.png

再次執(zhí)行

$flutter doctor

ios模塊的紅叉已經消失

image.png

在這里環(huán)境已經配置結束!

二.創(chuàng)建flutter應用初體驗

1.創(chuàng)建一個文件夾用于存放創(chuàng)建的flutter應用,并且cd到此文件夾.接著命令行工具創(chuàng)建flutter應用

$flutter create demo01 

image.png

2.修改flutter SDK目錄的權限以及項目的權限(-R代表遞歸,777代表可讀可寫可執(zhí)行)
1>修改flutter項目的權限
首先進入到創(chuàng)建的flutter項目

$ cd /Users/zhuge/flutter_mac/demo/demo01

然后執(zhí)行關鍵命令

$sudo chmod -R 777 *

2>修改下載的flutter SDK的權限
首先進入到flutter SDK目錄

$ cd /Users/zhuge/flutter_mac

然后執(zhí)行關鍵命令

$sudo chmod -R 777 *

如果出現問題,還要修改下載的flutter SDK的權限.
3.用xcode打開項目.如果遇見白屏,只需要卸載重現安裝即可(假卡死).（或者在創(chuàng)建的flutter項目目錄下使用命令行運行項目$ flutter run）

image.png

三稚新、配置編輯器

利用Vscode開發(fā)flutter項目
1.安裝Vscode,下載地址：https://code.visualstudio.com/docs/?dv=osx
2.安裝Flutter插件
1>啟動 VS Code
2>調用 View>Command Palette…
3>輸入 ‘install’, 然后選擇 Extensions: Install Extensions
4>在搜索框輸入 flutter , 在搜索結果列表中選擇 ‘Flutter’, 然后點擊 Install

image.png

image.png

image.png

5.此時ios模擬器已開啟,并且Vscode能檢測到模擬器設備

image.png

Vscode打開已創(chuàng)建的flutter項目,進入調試,執(zhí)行

$flutter run

在調試中,p:顯示網格,r:熱加載(也就是重現加載),o:切換安卓和ios不同的操作系統(tǒng),h:展示幫助信息,q:退出調試預覽模式
5.此時模擬器沒有開啟,Vscode右下角顯示"no devices"

image.png

此時需要用Vscode掉起ios模擬器,點擊"no devices",選擇ios模擬器

image.png

$flutter run