Vue前端轉(zhuǎn)Flutter一（環(huán)境配置）

（*注：以下僅個(gè)人配置過程參考，系統(tǒng)win7-64）

10余年的阿爾山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整阿爾山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“阿爾山網(wǎng)站設(shè)計(jì)”,“阿爾山網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

所需軟件

vsCode，Android Studio， MuMu模擬器 （直連手機(jī)調(diào)試的話就不需要了）

配置過程

1、Flutter安裝

安裝時(shí)忘記截圖，具體可參考鏈接 flutter中文網(wǎng) 相關(guān)教程+ 百度 ，現(xiàn)在網(wǎng)上教程很多，多踩點(diǎn)坑總會成功的。

2、MuMu模擬器調(diào)試時(shí)需進(jìn)行相關(guān)配置

（*注：直連手機(jī)調(diào)試可忽略以下；執(zhí)行以下操作需要在執(zhí)行flutter doctor成功后，flutter run執(zhí)行前）

（1）mumu模擬器端口監(jiān)聽，需要執(zhí)行

（2）mumu模擬器調(diào)試flutter run可能會報(bào)錯(cuò)，可以改成，具體原因可直接百度“--enable-software-rendering”

3、如需調(diào)試ios端可嘗試虛擬機(jī)+macOS+xCode

vmware+macOs可參考鏈接 VMware15安裝MacOS系統(tǒng) ，筆者按照該步驟已安裝成功

Flutter （三） 狀態(tài)管理

Flutter （二）布局

Flutter （三） 狀態(tài)管理

Flutter （四） Map轉(zhuǎn)模型

Flutter （五） 網(wǎng)絡(luò)請求

Flutter （六） 保留界面狀態(tài)

Flutter （七） 混合開發(fā) [配置]

Flutter （八） 混合開發(fā) [Flutter完整項(xiàng)目嵌入到原生]

flutter 網(wǎng)絡(luò)請求dio的簡單使用以及請求頭參數(shù)的自定義

dio的使用方式有很多，我就只選出我認(rèn)為最好用的api方式做下記錄,把get成post就是post請求了,網(wǎng)絡(luò)請求都用的百度的api，實(shí)際上的response沒有任何意義，所以只要打印出response有值即可。

1.最簡單的請求例子,網(wǎng)絡(luò)請求是異步的所以用async await

2.帶有參數(shù)的get請求

3.自定義請求頭,可定義的請求頭dart已經(jīng)為我們提供了專門的類存了對應(yīng)的字符,引入以下庫，就能使用 HttpHeaders

一般我們請求接收到的數(shù)據(jù)是json格式，如'accept: application/json',我們就可以這樣自定義請求頭

4.使用Baseoptions

其他詳細(xì)參數(shù)設(shè)置參考如下:

Flutter開發(fā)環(huán)境配置（MAC版）

（該路徑會有變化，可以關(guān)注Flutter社區(qū)，隨時(shí)更新）

Documents為目錄，fluttersdk為sdk文件夾

cd 到對應(yīng)的項(xiàng)目工程中執(zhí)行命令：

在終端中執(zhí)行 flutter doctor 查看Android和iOS的開發(fā)環(huán)境，監(jiān)測到依賴若有缺失，會給出缺失的依賴的安裝結(jié)果，依照提示進(jìn)行安裝即可。

在命令終端執(zhí)行相關(guān)命令：

打開Android Studio應(yīng)用，打開菜單項(xiàng)Preferences Plugins中搜索Flutter插件并點(diǎn)擊install進(jìn)行安裝

打開 VS Code，可點(diǎn)擊 View - Command Palette，搜索flutter并點(diǎn)擊install進(jìn)行安裝

vscode flutter 環(huán)境搭建

環(huán)境準(zhǔn)備階段：

android-studio 版本：android-studio-ide-191.5977832-windows.exe 3.5.2

flutter版本：stable 版本 （完成系統(tǒng)環(huán)境變量 path配置）

dart版本：2.12.0 （完成系統(tǒng)環(huán)境變量 path配置）

完成相關(guān)軟件安裝。

配置flutter相關(guān)SDK及andriod studio路徑：

flutter config --android-sdk="C:\Users\Administrator\AppData\Local\Android\Sdk"

flutter config --android-studio-dir="D:\Program Files\Android\Android Studio"

執(zhí)行flutter doctor運(yùn)行成功。

夜神模擬器地址：D:\Program Files\Nox\bin （完成系統(tǒng)環(huán)境變量 path配置）

andriod SDK tools：C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools （完成系統(tǒng)環(huán)境變量 path配置）

nox_adb.exe connect 127.0.0.1:62001

dart SDK:D:\software\dartsdk-windows-x64-release\dart-sdk\bin

將C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 下面adb.exe 復(fù)制至D:\Program Files\Nox\bin覆蓋

adb.exe，此外重新復(fù)制adb.exe命名為nox_adb.exe，替換原有的nox_adb.exe。

cdm 輸入nox_adb version 及adb version發(fā)現(xiàn)版本一致。

啟動野神模擬器，輸入adb devices發(fā)現(xiàn)虛擬設(shè)備，執(zhí)行flutter devices發(fā)現(xiàn) 127.0.0.1:62001 設(shè)備。

修改C:\learn_flutter\first_flutter\android\gradle\wrapper\gradle-wrapper.properties

distributionUrl=

修改C:\learn_flutter\first_flutter\android\build.gradle

buildscript {

ext.kotlin_version = '1.3.50'

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

allprojects {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\flutter.gradle

buildscript {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

dependencies {

classpath 'com.android.tools.build:gradle:4.1.0'

}

}

//private static final String DEFAULT_MAVEN_HOST = " ";

private static final String DEFAULT_MAVEN_HOST = " ";

修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle

repositories {

google()

jcenter()

maven {

//url "$storageUrl/download.flutter.io"

url " "

}

}

執(zhí)行 flutter run啟動成功。

環(huán)境搭建坑點(diǎn)在于JDK兼容問題以及網(wǎng)絡(luò)問題。

標(biāo)題名稱：flutter網(wǎng)絡(luò)配置,flutter20 環(huán)境不好配置
文章源于：http://jinyejixie.com/article28/dsdgicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站收錄、虛擬主機(jī)、網(wǎng)站內(nèi)鏈、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)