Flutter 初級(jí)體驗(yàn)

---

? ? hi，大家好，這是第一次使用Flutter，使用Flutter 的原因有兩個(gè)吧，最直接的原因是項(xiàng)目驅(qū)動(dòng)，還有個(gè)就是boss大佬強(qiáng)烈推薦，從知道Flutter到開(kāi)始使用已經(jīng)過(guò)了半年多，這邊年多一直關(guān)注著Flutter的最新動(dòng)態(tài)，從RN過(guò)度過(guò)來(lái)，已經(jīng)感覺(jué)不敢隨便再愛(ài)了。持續(xù)了半年多的積極關(guān)注，終于下決心入坑了。

? ? 首先我們來(lái)看看Flutter 官方解釋?zhuān)?/p>

很明顯，這是一個(gè)跨平臺(tái)的產(chǎn)物，對(duì)于原生iOS開(kāi)發(fā)5年的開(kāi)發(fā)來(lái)說(shuō)，第一感覺(jué)還是比較抵觸的。但是由于慢慢的接觸，關(guān)注，漸漸的對(duì)他有一些了解以后，就會(huì)發(fā)現(xiàn)這個(gè)家伙還是很厲害的，但是對(duì)于新手來(lái)說(shuō)，安裝，學(xué)習(xí)等問(wèn)題還是有一丟丟難度，這里我會(huì)帶著大家一起進(jìn)入Flutter 的世界。

由于我自己使用的是Mac 系統(tǒng)，暫時(shí)我們以 Mac 安裝為主，其他系統(tǒng)類(lèi)似，也可以參考官網(wǎng)鏈接：https://flutterchina.club/setup-macos/

首先我們需要在 Flutter 官網(wǎng)下載：https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos

GitHub地址：https://github.com/flutter/flutter/releases

選一個(gè)合適的最新版本，如果不想翻墻需要在 命令行中輸入 ：

//下面兩行是切換國(guó)內(nèi)資源路徑

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

//下載Flutter，這里加了-b ?dev可能會(huì)慢，我這直接去掉了-b dev

git clone -b dev https://github.com/flutter/flutter.git

//PWD是你的flutter盤(pán)的絕對(duì)路徑，這里需要根據(jù)自己的路徑填寫(xiě)。在命令行中進(jìn)入flutter目錄之后輸入 pwd即可獲得。

export PATH="$PWD/flutter/bin:$PATH"

cd ./flutter

//最后 在命令行中 直接輸入下面命令會(huì)出現(xiàn)很多沒(méi)有安裝的問(wèn)題

flutter doctor

如圖，我這里安裝完了，沒(méi)有截圖，就沒(méi)有一步一步操作下去，因?yàn)檫@里操作比較簡(jiǎn)單，直接根據(jù)提示就可以了，鏈接都有提供 ?，如果還是不清楚，就輸入 flutter doctor -v，會(huì)提示怎么解決 ?的問(wèn)題，也是比較方便，這里就不在做詳細(xì)的闡述了。

安裝完之后，需要下載兩個(gè)IDE ，一個(gè)是iOS開(kāi)發(fā)用的Xcode，一個(gè)是安卓開(kāi)發(fā)用的Android Studio。

這些安裝的過(guò)程需要等待一段時(shí)間，之后需要配置環(huán)境變量。

配置環(huán)境變量

---

先通過(guò)命令行查找 ?.bash_profile 文件并且打開(kāi)它

?如果沒(méi)有.bash_profile文件 ，在命令行中輸入下面命令

1.注意這里如果是純凈的電腦可能沒(méi)有這個(gè)文件，如果沒(méi)有去創(chuàng)建他，

2. 進(jìn)入當(dāng)前用戶(hù)的home目錄

?輸入cd ~

3. 創(chuàng)建.bash_profile

?輸入touch .bash_profile

4. 編輯.bash_profile文件

?輸入open .bash_profile

如果有 .bash_profile文件直接打開(kāi) 配置環(huán)境變量

在命令行輸入（驗(yàn)證flutter 環(huán)境變量）：

最后按照官網(wǎng)如下步驟即可。

通過(guò)運(yùn)行flutter/bin命令驗(yàn)證目錄是否在已經(jīng)在PATH中:

echo $PATH

最有切記，關(guān)掉所有 命令行，配置環(huán)境變量之后需要重啟命令行，否則還是找不到等問(wèn)題。

安裝到iOS環(huán)境 ，這個(gè)過(guò)程需要網(wǎng)速和時(shí)間，可能比較慢。

要將您的Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備，您需要一些額外的工具和一個(gè)Apple帳戶(hù)，您還需要在Xcode中進(jìn)行設(shè)置。

安裝 homebrew （如果已經(jīng)安裝了brew,跳過(guò)此步驟）.

打開(kāi)終端并運(yùn)行這些命令來(lái)安裝用于將Flutter應(yīng)用安裝到iOS設(shè)備的工具

brew update

brew install --HEAD libimobiledevice

brew install ideviceinstaller ios-deploy cocoapods

pod setup

之后的過(guò)程就是去配置xcode 代碼中的證書(shū)和安卓的一些配置問(wèn)題，相對(duì)看著官網(wǎng)步驟就能解決問(wèn)題，最后

android studio ，需要下載flutter 和dart，因?yàn)閄code ，flutter ，dart不支持，所以只能用android studio 去開(kāi)發(fā)。

所以，在打開(kāi)android studio 之后，不要著急選擇，點(diǎn)擊左上角的 Android Studio

android studio

再點(diǎn)擊 Preferences

點(diǎn)擊 Plugins

輸入 flutter，這里注意，作者用的截圖是已經(jīng)安裝的，有提示Uninstall，如果沒(méi)有安裝這里顯示的是 install

dart 會(huì)自動(dòng)安裝，選擇ok 就可以。如圖。

安裝好了之后，就可以使用 flutter 開(kāi)發(fā)app 了，我們可以新建一個(gè)app 來(lái)感受一下。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/18190.html