Windows 10 系统下配置Flutter开发环境
在Windows平台下开发移动端应用,需要配置Flutter开发环境,以下是保姆级教程,全网最详尽,按照这个步骤一步一步往下走,保证可以配置一个完整的Flutter移动端开发环境,万里长征第一步,祝您成功!
第一步:为Flutter设定镜像配置。
由于Flutter默认的资源包、更新包等都在国外,在国内网络环境访问会有“墙”的阻碍,需要把目标地址指向国内的镜像,因此需要配置两个环境变量,具体操作如下:
1、Windows 10系统下点击搜索,输入“环境变量”,点击“编辑系统环境变量”。
2、接着点击“环境变量”,进入环境变量编辑页面。
3、在“环境变量”页面中,点击用户变量的“新建”按钮,按照以下内容添加两个环境变量:
4、最后点击“确定”—>“确定”。
第二步:系统配置要求。
要想安装和运行 Flutter,你的开发环境至少应该满足如下的需求:
操作系统:Windows 10 或更高的版本(基于 x86-64 的 64 位操作系统)。
磁盘空间:除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。
设置: 必须在 Windows 10/11 上启用开发者模式。
工具:要让 Flutter 在你的开发环境中正常使用,依赖于以下的工具:
或者更高的版本(Windows 10 中已预装)
2.x,并且勾选从 Windows 命令提示符使用 Git 选项。
1、一般情况,Windows 10系统默认已经安装了Windows PowerShell 5.0,如果不确定版本,也可以打开Windows PowerShell,输入$PSVersionTable,敲回车即可查看到版本信息:
2、下载安装Git,点击右边网址链接:Git - Downloading Package (git-scm.com),下载Git,并安装,安装过程可以按照安装引导选择默认选项即可,安装完成后如图所示,你可以输入“git –version”命令,查看版本信息:
第三步:获取Flutter SDK
SDK,即Software Development Kit,中文意思是软件开发工具包。Flutter SDK中包含了Flutter开发所需要的各种工具、框架等,是Flutter开发所必备的工具包,请按照以下内容配置好Flutter SDK:
1、下载Flutter SDK,点击以下链接下载,这是3.7.3版本,是目前最新的稳定版本。
Flutter_windows_3.7.3-stable.zip
请注意请勿将 Flutter 有特殊字符或空格的路径下。请注意请勿将 Flutter 安装在需要高权限的文件夹内,例如 C:\Program Files\。2、将压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中(例如 D:\src\flutter)。
3、如果你不想安装指定版本的安装包。可以忽略步骤 1 和 2。从 GitHub 上的 Flutter repo 获取源代码,并根据需要,切换到指定的分支或标签。例如:
C:\src>git clone https://github.com/flutter/flutter.git -b stable
现在你可以在控制台当中使用 Flutter 的命令了。
第四步:更新Path环境变量
如果你想在 Windows 控制台中运行 Flutter 命令,需要按照下面的步骤来将 Flutter 的运行文件路径加入到 Path 环境变量。
1、打开上一步设置的Flutter目录,进入bin文件夹,然后复制整个目录路径。
2、按照第一步的操作,打开“环境变量”页面,然后选中Path,点击“编辑”(如果没有Path,则像上面那样,点击“新建”,创建Path变量),在“编辑环境变量”页面中,点击“新建”,把上面复制的目录,粘贴在编辑框中,最后一步一步点击“确定”完成操作。
3、此时,可以打开以上安装的Git Base或者Windows PowerShell,又或者命令提示符均可,在上面输入命令flutter –version,如果显示Flutter版本信息,则说明Flutter SDK配置成功,如下图所示,我用的是Git Bash进行测试。
第五步:配置Java开发环境
1、由于Flutter开发需要有Java的支持,因此,在这里也需要在你的机器上配置好Java SDK,也就是所谓的JDK,这里我用的是Java 17(LTS).可以进入官网下载最新的Java工具包:
Java 17(LTS)
2、由于到官网Oracle下载JDK速度较慢,也可以选择国内的镜像站去下载,例如以下链接:
Java 17(LTS) injdk镜像站
选择以下文件,点击下载(如下图所示:)
3、下载下来的是一个非安装版的压缩包,只需要加压缩出来,把里面的文件夹jdk-17.0.1复制到一个目录中(例如:D:\Java17)
4、接下来是配置环境变量。打开环境变量页面,按照以下图片所示进行配置:
(1)新建用户环境变量JAVA_HOME,值为“D:\Java17\jdk-17.0.1”,如下图:
(2)然后进入用户变量中的Path,点击“编辑”,新建以下path,即“%JAVA_HOME%\bin”,如下图:
(3)测试JDK是否配置成功,操作如下:重新打开Windows PowerShell(注意:一定要重新打开Windows PowerShell,不能用在配置Java环境变量前打开的),然后输入命令“java –version”,如果能够成功显示JDK版本信息,则说明JDK配置成功。
第六步:设置 Android 开发环境
目前比较流行的Android开发环境有谷歌自己的Android Studio,以及微软的Microsoft Visual Studio Code,在这里推荐使用前者。
1、下载Android Studio。
2、安装Android Studio,安装路径可以选择默认位置,但最好改为自己比较熟悉的位置,我习惯放在D:\根目录下。
3、接着是配置Android Studio。
(1)运行Android Studio,初始选择如下,点击OK:
(2)点击Don’t send,这个时候先不要点击Next
(3)如果出现以下图片对话框,先点击Cancel,然后点击Next按钮。
(4)在Install Type页面中,选择Custom,点击Next按钮进入下一步。
(5)来到Select default JDK Location,也就是选择JDK的位置,此处可以保持默认,点击Next按钮进入下一步。
(6)Select UI Theme这一步中,选择你喜欢的主题。
(7)来到SDK Components Setup这一步很重要,涉及到SDK的保存位置,我的想法是,最好不要让其默认,而是选择一个你比较熟悉的位置,我选择的位置如图所示:
(8)点击Next时,会出现如下图所示对话框,直接点击OK,然后点击Next按钮。
(9)这一步的Emulator Settings,用Recommended值即可。
(10)接下来的那一步默认,然后来到License Agreement,这里需要把Licenses中的全部选项分别勾选上“Accept”,最后点击Finish按钮。
(11)接下来就是等待它自身下载完。
(12)到目前为止,Android Studio的安装配置算是大功告成。
(13)接着来到项目创建,首先在弹出的欢迎界面中,下载Flutter和Dart插件。
(14)下载好Flutter插件后,点击Flutter插件旁边的Restart按钮。这样就可以看到一个可以创建Flutter Project的新的欢迎界面。
(15)接下来,点击More Actions,然后点击SDK Manager,来到Settings页面。
(16)在Settings页面中,按照如下图所示,进行操作,点击OK:
第七步:运行flutter doctor
运行flutter doctor,主要目的是检验Flutter配置到目前位置还有那些需要配置的东西。打开Git Base(上面已经安装好了),输入命令“flutter doctor”。你会发现这有一些打[x]的信息,接着就是一个个去解决,可以把打叉的信息复制到搜索引擎查找解决办法,网上基本上都有。
比如我这里有5个,分别一个个解决。
(1)X Windows Version (Unable to confirm if installed Windows version is 10 or greater)
这个问题较好解决,打开面板依次运行flutter channel—>flutter channel master—>flutter upgrade—>flutter channel—>flutter doctor
最后执行flutter doctor检查,即可解决。
(2)X Unable to locate Android SDK.
这个问题意思是找不到Android SDK,解决方法是用以下命令,指定Android SDK的目录就行:
flutter config --android-sdk "D:\Android\SDK"
后面的参数"D:\Android\SDK"是你在之前配置Android Studio时设置的位置,参看以上第六步的第(7)小步。
(3)! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
这里是一个叹号,并不是打叉,可以不管,但也可以解决,直接运行命令:flutter doctor --android-licenses,一路输入“Y”,然后敲回车即可。
(4)最后的两个问题。
一是Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
这个问题的意思是你的系统没有安装Chrome浏览器,这是用来开发web程序的;解决方法是直接安装一个谷歌浏览器(Chrome Browser)即可,如果你不需要开发web程序,则可以不管。
二是Visual Studio - develop for Windows
X Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
这个问题意思是说需要你安装Visual Studio来支持用Flutter来开发Windows桌面程序,还是那句,如果你不需要开发桌面程序,则可以不管。
最后的最后,如果单纯用Flutter来开发移动端,则Flutter的配置到此结束,大功告成。