【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阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容