先说建议:
1、如果你是打算新建flutter项目从头开始,那么完全可以按照我的步骤来搭建环境,我的搭建时间是2021年10月12日,新项目是可以跑起来的。
2、如果你是想运行已有的flutter项目,建议还是安装 android studio。原因是在按照我的步骤完成环境搭建之后,旧项目一跑,会报一大片各种包的错误,可能是环境中jdk和sdk的版本问题吧,原因我也只能猜,我花了一上午叫了好几个做flutter的同事帮我看,都没有解决那些问题,一致建议我安装 android studio 先把项目相关依赖包都安装好,安装好之后再卸掉 android studio 都没关系,所以我最后是扩了C盘,安装了 android studio。
建议:如果电脑配置足够支持,还是建议使用 android studio
正文开始
注意:如果是用android studio工具,只要做前三步就可以了。
再次注意:以下涉及所有路径最好不要包含中文字符,尤其是java-jdk路径,不能包含中文字符
步骤一、下载flutter
地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=windows#windows
注:下载稳定版最新版即可
下载完成后解压
步骤二、配置环境变量
打开 我的电脑 =》属性 =》高级系统设置 =》环境变量
用户变量配置:
变量名:FLUTTER_STORAGE_BASE_URL
变量值:https://storage.flutter-io.cn
变量名:PUB_HOSTED_URL
系统变量配置:
在path变量中添加变量值:
D:\电脑软件\flutter\flutter_windows_2.5.2-stable\flutter\bin
注:这个地址是刚刚解压后的flutter下的bin目录
配完后如下图所示:
步骤三、打开命令行工具测试flutter环境
执行命令:flutter doctor (注:这是用来检查环境变量是否配置好了)
这个时候会出现如下结果:
步骤四、下载 Java jdk 和 android sdk
下载Java jdk
直接装 openjdk8:https://jdk.java.net/java-se-ri/8-MR3
注:我先后装过jdk17、jdk8,结果都不行,项目跑不起来,只有这个是亲测可以。
这个是压缩包,免安装,解压完成后配置环境变量:
在系统变量中的path变量中,添加变量值: D:\jdk\openjdk8\bin
注:这是解压后的bin目录
下载android sdk(这个可能需要*,如果下不了的,可以联系我,我私信给包)
地址:https://developer.android.google.cn/studio/
找到 Command line tools only,下载对应平台压缩包
下载完成后解压,在 cmdline-tools 文件夹下新建一个 latest 文件夹,再将 cmdline-tools 文件夹中原有的东西全部剪切放入latest文件夹中,效果如下:
配置环境变量:
在系统变量中的path变量中,添加以下三个变量值:
D:\电脑软件\android-sdk\cmdline-tools
D:\电脑软件\android-sdk\build-tools
D:\电脑软件\android-sdk\platform-tools
注:后两个目前还没有对应文件夹,是待会安装之后才会生成的,先配上去
进入 latest 文件夹下的bin目录,按住shift键后点击鼠标右键,打开powershell,输入命令: .\sdkmanager.bat --list
注:这个命令是用来查看可下载的工具版本
会出现如下图结果:
步骤五、下载sdk和工具
在powershell中继续执行命令:
.\sdkmanager "build-tools;31.0.0" "platform-tools" "platforms;android-30"
注:这是安装了三个东西,每个东西用双引号括起来,且用空格分隔,前两个必装,第三个是安卓sdk,输入命令后会询问是否统一协议,输入y并回车
然后等待下载完成,这是个很漫长的过程
注:如果网络不太好,建议分开装,不要一次装三个,我在尝试了好几次之后选择分开安装了
全部安装完之后,再在命令行工具检查flutter环境
原来的叉叉就没有了,我们按照提示执行命令,但不是在这个目录下执行,还是在我们刚刚安装三个工具那里执行命令:
.\sdkmanager --licenses
然后会出现一连串询问你是否统一协议,一律输入y回车就好了
这个时候我们再去检查flutter环境,就OK了、
步骤六、试运行和连接真机
新建一个flutter项目:
执行命令: flutter create test_flutter
然后打开vscode,首先先把flutter插件装上
然后将flutter项目导入
在运行之前还要做一件事情:
在 C:\Users\admin\.gradle 目录下 新建一个文件 gradle.properties
文件内容是:
org.gradle.jvmargs=-Xmx512m
注:不加这个文件的话,运行项目时会报 gradle的相关错误
我没有装模拟器,是直接用真机调试的。
通过数据线连接手机,打开开发者模式
在项目根目录执行命令:flutter run
flutter项目就会在手机上跑起来了
我为了方便是直接手机投屏到电脑上进行操作,最终效果如下:
在图片左下角处 可以看到 flutter run key commands ,都是一些热更新的快捷键,修改代码保存之后,执行相应快捷键命令就可以看到修改后的视图了。