Flutter桌面應(yīng)用問題日常記錄

2022年? Flutter搭建桌面應(yīng)用環(huán)境及build打包 (?.exe)啟動(dòng)文件

一步一個(gè)坑終于蹚出來了,起碼能打成壓縮包供用戶使用。寫的不好還望勿噴。Flutter打包 windows桌面端程序步驟,還是有點(diǎn)復(fù)雜的,看了好幾篇文章,這里總結(jié)一下。以下是本人瀏覽過的文章。

主要參考文章:

Flutter 打包 windows桌面端程序步驟? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Flutter 打包 windows桌面端程序步驟(生成.exe文件)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Flutter桌面應(yīng)用支持官網(wǎng),里面介紹了window、linux、macOs下環(huán)境搭建及打包上架

先上一下效果


需要使用到的環(huán)境配置(親測)

一、運(yùn)行環(huán)境:Windows10系統(tǒng)、AndroidStudio4.2.2、VisualStudio 2019(官網(wǎng)舉例安裝2022)、FlutterSDK2.10.4(一定是2.10及以上版本)

首先要確保環(huán)境變量的配置:

二:Flutter環(huán)境搭建地址(官方)

安裝Visual Studio 2019或2022

安裝Android Studio

安裝Flutter SDK(確保Android和Visual Studio都沒有問題)

安裝go環(huán)境(打包需要go環(huán)境)

打開CMD控制面板輸入一下命令,開啟window支持

flutter config --enable-windows-desktop

2、創(chuàng)建Flutter項(xiàng)目

flutter create filewindows


結(jié)果如下(注意:這個(gè)時(shí)候,是沒有g(shù)o文件夾的):

image.png

3、安裝VisualStudio

在Android Studio打開剛剛的工程flutter_test_01,在下面android studio的控制臺(tái)Terminal,執(zhí)行flutter doctor,查看一下當(dāng)前環(huán)境,如果你的環(huán)境如下面那樣,也就是說flutter doctor檢測到環(huán)境沒有報(bào)錯(cuò),那么下面的步驟可以跳過。

image.png

如果有報(bào)錯(cuò)如下面,請(qǐng)繼續(xù)往下面看,解決此問題

image.png

提示我們未安裝Visual Studio,下載地址:https://visualstudio.microsoft.com/zh-hans/downloads/下載一下就可以了,如果你現(xiàn)在flutter的版本和我的一樣是2.0版本的,下載 2019版本的visual studio。其他的版本請(qǐng)參考自己的flutter要求的哈。

其中重點(diǎn)要關(guān)注下,需要安裝win10 SDK,否則會(huì)有問題

image.png

如上面,打開 Visual Studio Installer ------->點(diǎn)擊修改,--------->然后如下圖安裝,就可以了

image.png

4、打包flutter 桌面端程序

1)go安裝和環(huán)境配置

瀏覽器打開:https://studygolang.com/dl直接下載

本人的版本是:go version go1.15.1 windows/amd64,,本人下載的是go1.15.1 windows-amd64.msi文件;下載好之后,本人在D盤新建一個(gè)目錄,go/source作為go的安裝目錄;同時(shí)我在C盤新建一個(gè)目錄go(后面打包過程中會(huì)生成一些文件,放在此文件夾下)

image.png

image.png

2)設(shè)置環(huán)境變量

操作步驟:我的電腦--->右鍵---->屬性----->高級(jí)系統(tǒng)設(shè)置----->環(huán)境變量

新增一個(gè)GOROOT和GOPATH及一個(gè)代理GOPROXY

image.png

image.png

image.png

然后如下圖操作,環(huán)境變量PATH新增 %GOROOT%\bin;%GOPATH%\bin,新增完成,要記得,點(diǎn)擊確定,確定,讓設(shè)置生效

image.png

image.png

3)驗(yàn)證環(huán)境變量,有沒有設(shè)置成功

快捷鍵(鍵盤上的win鍵+R鍵)重新打開一個(gè)命令行窗口;運(yùn)行g(shù)o命令,不會(huì)報(bào)錯(cuò)的話,說明環(huán)境變量設(shè)置成功

image.png

4)初始化

cd到flutter_test_01目錄,接著命令hover init,最終會(huì)在工程目錄下生成一個(gè)go文件夾(在新建工程的時(shí)候,是沒有g(shù)o文件夾的),如下

image.png

image.png

5)打包 接著上面的步驟 ,輸入命令hover run進(jìn)行打包

你又會(huì)發(fā)現(xiàn)報(bào)錯(cuò):exec: “gcc”: executable file not found in %PATH%這是缺少一個(gè)環(huán)境變量,別急,補(bǔ)上去,

https://sourceforge.net/projects/mingw-w64/files/mingw-w64/

image.png

6)mingw-w64下載完成后,進(jìn)行安裝

image.png

這個(gè)地方需要選擇x86_64的版本,不過如果你的電腦還是32位的話,選擇對(duì)應(yīng)的32位版本,如下圖

image.png

這一步建議,安裝路徑就用默認(rèn)的,而且要把這個(gè)路徑復(fù)制一下,后面會(huì)用到!!!(復(fù)制路徑的方法:鼠標(biāo)右鍵一下,選擇“全選”,再右鍵一下,選擇“復(fù)制”)

C:\Program Files\mingw-w64\x86_64-6.2.0-posix-seh-rt_v5-rev1

image.png

image.png

7)配置環(huán)境變量

找到mingw-w64的安裝路徑,(根據(jù)上面第(6)步,復(fù)制的路徑去找完整的路徑)我的如下 :

·C:\Program Files\mingw-w64\x86_64-6.2.0-posix-seh-rt_v5-rev1\mingw64\bin

如果你的電腦是32位的話,可能就要去C:\Program Files (x86)下面去找

image.png

image.png

配置完成,要記得“確定”,“確定”,“確定”!!

8)hover run命令 將我們exe文件運(yùn)行起來

如果在打包的時(shí)候系統(tǒng)會(huì)幫我們自動(dòng)生成 main_desktop.dart 文件,就輸入y

image.png

或者如下圖這樣,能正常運(yùn)行起來,,最終效果就是exe文件正常運(yùn)行起來了

image.png

image.png

最后

如果要把exe文件,發(fā)送給客戶使用的話,不能直接只給一個(gè).exe文件給客戶,因?yàn)?exe文件要運(yùn)行起來,需要依賴其他文件,如.dll文件,還有其他資源文件等。

正確的做法是要把.exe上級(jí)文件夾發(fā)給客戶,也就是說要把windows-debug_unopt文件夾發(fā)送給客戶使用;順便說一下,.exe文件打包出來是在go的文件夾下面,如下圖

image.png

windows-debug_unopt文件夾下面有.exe文件 及 其依賴的文件,如下

打包命令:flutter build apk/windows

如果提示類似error問題,說明引用的庫含有不支持safety模式了,需要在運(yùn)行或編譯時(shí)加上

--nu-sound-null-safety

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容