【flutter填坑】使用flutter進行Windows開發

本文將介紹,如何在windows上,使用flutter開發。
目錄:
一、Windows安裝環境配置
講述了如何在Windows上搭建flutter環境及開發工具
二、為項目創建Windows支持
講述了如何創建包含Windows環境的flutter項目,以及如何為已有項目添加Windows支持
三、Flutter在Windows上的數據庫支持
講述了如何在Windows上使用Flutter的數據庫
四、Flutter在Windows上的Webview支持
講述了如何在Windows上使用Flutter的Webview
五、將項目打包成exe安裝包
六、將項目打包時,添加額外的環境安裝文件,使引導程序自動為用戶安裝

一 Windows安裝環境配置

想要在Windows桌面平臺使用flutter進行開發,首先需要安裝如下的環境:
flutter sdk
visual studio 2022
另外,本文將采用android studio作為IDE為例

1.flutter sdk安裝

點擊這里跳轉到flutter sdk頁面
請使用stable channel中最新版本的安裝包

安裝完成后,我們并沒有完成sdk的配置:

(1)配置系統變量

在此電腦-屬性-高級系統設置-環境變量中,打開Path(如果沒有請新建),添加:

你的flutter路徑\bin

例:D:\flutter\bin
這是為了我們能夠在命令行工具中直接使用flutter指令

(2)網絡環境配置

考慮到中國的網絡環境問題,請進行如下配置:
在環境變量中,新建變量

第一組:
變量名稱:FLUTTER_STORAGE_BASE_URL
變量值:https://storage.flutter-io.cn

第二組:
變量名稱:PUB_HOSTED_URL
變量值:https://pub.flutter-io.cn
(3)gradle環境配置

考慮到中國的網絡環境問題,請進行如下配置:
使用文本編輯打開此文件:

你的flutter路徑\packages\flutter_tools\gradle\flutter.gradle

隨后在buildscript標簽下,修改repositories的值
默認值是

repositories {
    google()
    mavenCentral()
}

修改成:

repositories {
    maven { url 'https://maven.aliyun.com/repository/public' }
    maven { url 'https://maven.aliyun.com/repository/google' } 
    maven { url 'https://maven.aliyun.com/repository/gradle-plugin'} 
    maven { url 'https://maven.aliyun.com/repository/central' } 
    maven { url 'https://maven.aliyun.com/repository/jcenter' } 
}

這里使用的是阿里云的鏡像,想了解請點擊云鏡像說明

2.Visual Studio 2022安裝

請點擊這里安裝Visual Studio 2022。注意,Visual Studio和Visual Studio Code不是一個東西
在安裝時候,注意要勾選使用C++的桌面開發。如果需要開發webview相關內容,請勾選通用Windows平臺開發

如果已經安裝過Visual Studio,使用以下方式擴展安裝內容
打開此文件:

C:\Program Files(x86)\Microsoft Visual Studio\Installer\setup.exe

點擊修改,即可進入配置頁面。

3.開發工具Android Studio安裝

本文章使用Android Studio作為開發IDE,當然,也可以選擇其他IDE進行開發。
請點擊這里安裝Android Studio

為Android Studio提供flutter支持:
打開 File-Settings-Plugins,搜索Flutter,安裝插件,搜索Dart,安裝插件
重啟Android Studio后生效

打開Fils-Settings-Appearance&Behavior-System Settings-Android SDK
安裝需要的SDK版本。
在SDK Tools標簽下,確保安裝Android SDK Build-Tools, Android SDK Platform-Tools

4.疑難雜癥處理

在完成以上安裝環境配置后,請打開CMD命令行工具,執行

flutter doctor -v

可能遇到的問題:

(1)Visual Studio報錯,CMD中產生大量紅色錯誤提示

錯誤問題:

Bad UTF-8 encoding(U+FFFD;REPLACEMENT CHARATER) found while decoding string

解決方案:
點擊這里下載最新版本vswhere.exe
復制到以下目錄覆蓋原文件

C:\Program Files(x86)\Microsoft Visual Studio\Installer
(2)Android license問題

解決方案,執行:

flutter doctor --android-licenses
(3)Android sdk與jdk配置問題

有些情況下可能想要修改flutter所使用的android sdk路徑,請使用以下命令指定:

flutter config --android-sdk 你的SDK路徑

如果需要升級flutter使用的jdk版本,請升級flutter doctor -v下面輸出的路徑,它和系統中配置的java路徑可能不一樣

執行flutter doctor -v,這一項是你的flutter真正使用的jdk
Java binary at: /jdk

二 為項目創建Windows環境

1.創建支持Windows的新的flutter項目

執行

flutter config --enable-windows-desktop

來允許創建windows flutter項目,完成后,在Android Studio中新建項目即可選擇Windows平臺

2.為已經存在的flutter項目創建Windows支持

同樣的,先執行

flutter config --enable-windows-desktop

隨后,切換到項目所在路徑根目錄下,執行

flutter create --platforms=windows .  
 (注意,這里最后有個點 . )

三 Flutter在Windows上的數據庫支持

Flutter數據庫主要使用sqlite,點擊這里查看sqflite_common_ffi
但是推薦使用Floor框架來簡化開發:
點擊這里查看Floor

這里面有一個問題需要注意,雖然sqflite_common_ffi支持Windows平臺,但是在release環境下,需要手動安裝sqlite3.dll這個動態鏈接庫。
如果不手動配置,那么表現現象是,在debug版本中數據庫正常,但發布的版本中數據庫無法正常初始化。
Floor本質上依賴了sqflite_common_ffi,問題是同樣的。
sqlite3.dll,放在執行文件同目錄下即可正常。

四 Flutter在Windows上的Webview支持

Windows上的內嵌Webview問題,可以使用Webview2解決,目前已經有可使用的插件
webview_windows插件

使用插件需要安裝Webview2 Runtime環境
Webview2 Runtime環境
Evergreen Bootstrapper,這是一個下載+安裝的包,打開后會自動下載最小的runtime包安裝
Evergreen Standalone Installer,這是完整的離線安裝包
注意,如果你的軟件使用了Webview2 Runtime,那么你必須保證用戶的電腦上安裝了同樣的環境,否則Webview功能無法使用。這一點會在后面的打包中提到

Fixed Version,這是一個固定版本的,可以內嵌到軟件內部的壓縮包。你可以在軟件里嵌入Webview2,這樣可以獨立于系統中的Webview2存在,軟件會使用你自己的Webview2 Runtime,但是會增加安裝包的體積。

五 將項目打包成exe安裝包

1.為Visual Studio安裝installer project

這里以Visual Studio 2022為例
點擊菜單中的擴展-管理擴展,搜索installer project,安裝Microsoft Visual Studio Installer Projects 2022
(注意網絡情況)
安裝完成后,關閉Visual Studio,會自動執行安裝,按步驟完成即可。

2.打開項目中的sln文件

這個文件位置一般是

項目路徑\build\windows\runner\runner.sln
3.創建Setup Project工程

解決方案資源管理器中,右鍵點擊解決方案runner,添加-新建項目
搜索Setup Project,然后按步驟創建即可

4.配置Setup Project工程

在創建完成后,會有三條內容,分別是
Application Folder
User's Desktop
User's Programs Menu
首先在Application Folder中,右鍵點擊,添加項目輸出,這里選擇你的主項目名稱。
完成后Visual Studio會為你創建基本的dll庫文件,比如MSVCP140D.dll,VCRUNTIME140D.dll等等,以及你的項目build產生的exe和dll文件。

注意,flutter默認會build出存放資源的文件夾,這個需要手動拖拽到Application Folder下面。
此外,還需要手動添加我們自用的一些庫文件,如上文說到的flutter數據庫需要的sqlite3.dll等,根據自己情況添加。

每次修改后,需要右鍵點擊setup工程,并選擇重新生成。
每次生成一個msi文件,包含了所有dll和資源等,以及setup安裝文件,它會對系統環境進行檢測,并考慮為用戶安裝缺失的環境包(參考六中的配置)。

User's DesktopUser's Programs Menu是配置桌面快捷方式圖標和開始菜單快捷方式圖標,這里暫不贅述,可根據需要添加。

六 將項目打包時,添加額外的環境安裝文件,使引導程序自動為用戶安裝

如果你的軟件需要其他的環境,如.net framework,webview2環境等,需要添加到打包中,使用戶安裝軟件時候時候自動為用戶安裝環境。
右鍵點擊解決方案資源管理器中的setup工程,打開屬性-Prerequisites。
Visual Studio中自帶了一些可以使用的環境,包括.net framework, .net runtime等,其中也包括WebView2。

這里有三種方案:
1.從組件供應商的網站上下載系統必備組件
2.從與我的程序相同的位置下載系統必備組件
3.從下列位置下載系統必備組件

如果使用1或3,那么就可以直接確定結束。
它的意思是,用戶在安裝時候,需要去下載這些環境進行安裝,安裝程序會進行引導。
3的意思是,將這些需要的環境包配置在自己的服務器上,并在這里指定。而1是從供應商網站上下載。

如果選擇2,它表示我們提供好安裝包,安裝過程自動使用我們提供的環境安裝包。我們需要在本地下載好安裝包,并將它配置好,需要配置在

C:\Program Files(x86)\Microsoft SDKs\ClickOnce Bootstrapper\Package

具體配置什么,需要看自己的需求。
比如配置 .net framework 4.7.2,需要在

C:\Program Files(x86)\Microsoft SDKs\ClickOnce Bootstrapper\Package\DotNetFX472

路徑下,放置.net framework 4.7.2的安裝包。
DotNetFX472根目錄放置安裝包以后,還需要在需要的語言下,比如zh-Hans中放置語言包。它的用處是在安裝時候為用戶提供對應語言的協議和描述。
語言包下載路徑可以在各自目錄的Package文件中搜索包含http://go.microsoft.com/fwlink的類似鏈接中下載。

對于Webview2 Runtime環境,如果想使用以上方式,需要手動創建WebViewRuntime文件夾,并在其中放入MicrosoftEdgeWebview2Setup。
同時需要提供Product,package和eula文件
可以參考官方給出的實例,(官方實例可以直接使用)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,345評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,494評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,283評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,953評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,714評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,410評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,940評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,776評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,210評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,654評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容