flutter环境搭建

Kindergarten103

已于 2024-05-09 10:57:45 修改

阅读量807

点赞数 11

文章标签： flutter

于 2024-04-07 14:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_59478152/article/details/137345996

版权

flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

概要
基础环境
搭建windows下的安卓环境
初始化项目
- 通过命令行创建
搭建过程所遇问题
小结

概要

通过根据哔哔哩哩视频1 哔哩哔哩视频2的指示下一步一步安装成功的，其中由于教程是过去的，软件是最新的有一些操作发生了变化，经过摸索终于成功，目前没有什么新问题产生。

基础环境

操作系统

Windows下只能搭建Android开发环境，本次是Windows10下的联想台式电脑搭建环境。

Git

直接搜索，去官网下载Git，下载Windows版本，文件路径不要放在C盘。
双击安装，一直点击下一步。
win+r，输入cmd，打开命令行，输入：git --version
得到结果如图：

vs code

官网下载
安装flutter插件，按照序号操作，下载。
如图：

（视频中说需要翻墙，但是全程没有需要翻墙的地方，都是可以下载访问的）

搭建windows下的安卓环境

为flutter设置国内镜像

打开中文版flutter的官网页面（可以按照官网上的教程配置环境，我是完全根据视频走的，喜欢有着画面指示着操作。）
为flutter设定镜像配置
根据官网的说法是，

为了正常升级Flutter和通过pub package命令获取packages，你需要设置如下两个环境变量。
如果你在国内使用Flutter，那么你可能需要找一个与官方同步的可信的镜像站点，帮助你的Flutter命令行工具到该镜像站点下载其所需的资源。你需要为此设置两个环境变量:PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL，然后再运行Flutter命令行工具。

这里我用的是flutter社区的主镜象，设置方式如下：
找到我的电脑 => 空白处右键点选属性=>点选高级系统设置
如图所示：
在这里插入图片描述
然后按照如图输入第一个环境变量
变量名为：PUB_HOSTED_URL
变量值为：https://pub.flutter-io.cn

再输入第二个环境变量
变量名为：FLUTTER_STORAGE_BASE_URL
变量值为：https://storage.flutter-io.cn

JDK

去官网下载最新更新维护的版本
完成同样需要用命令行输入java --version查看版本号，如下图：
配置Java环境变量
声明为JAVA_HOME，变量值的路径选择自己安装的JDK的路径（不要和安装包在同一个文件夹下启动，最好新建一个文件夹），如下图：

再按照下图选择：

配置变量，引用上一步配置好的变量，新建之后输入%JAVA_HOME%\bin,再点击上移到顶点，最后点击确定，确定，确定。

Android Studio

安装Android studio

安装所需环境：
操作系统：Windows 7/8/10
内存：4GB以上
硬盘空间：最小2GB
JDK版本：视频推荐8，我安装的17最后也能运行，目前还没有出现什么错误
去直接搜索android studio，进入官网下载，直接点击下图选项下载
然后一直下一步，但是到了选择安装路径的时候，我放在了D盘下新建的一个文件夹里，然后记住这个路径
一直下一步到了 Verify Settings 这一步，选择finish然后等他下载。（视频中说需要翻墙下载，我不需要，稍等一会儿之后，下载成功了）
如果桌面上找不到Android studio的图标，可以通过下图中的搜索输入Android studio启动
启动并如图新建项目，选择empty activity
直接默认选择finish，新版的界面新建之后是这样的

安装flutter插件

Android Studio => File => Settings => Plugins => Marketplace =>搜索flutter=>点击Install 执行安装
点击install查看安装的插件，视频中说安装在flutter之后会自动安装dart，但是我的没有，所以执行相同步骤下载dart

之后可以看到如图：

安装Android SDK

虽然说一般可以忽略这一步，但是之后运行有一些问题，所以我还是把这一步操作上了

在菜单中进行如下操作：

接着

接着

再接着勾选下列选项配置SDK：

最后点击ok，等待下载。

安装模拟器

如果在页面最上面没有看到有模拟器的样子，那么就需要安装模拟器，如图：
在这里插入图片描述

按照以下步骤安装模拟器

接着显示很多类型的模拟器，选择需要的下载，不用全部下载，如图：

选择下一步，到这个界面选择如图，有个下载的图标，选择下载，如图：

继续下一步，到如图，然后下一步，到安装完成
效果展示
安装完成之后，新建一个app项目，点击如图所示按钮可以看到效果。

点击如图所示关闭

Flutter SDK

下载SDK
到官方网站（国内镜像版）下载SDK，选择了最新版本下载，这个网站下载的是压缩包，之后需要解压。
解压
将压缩包解压到除C盘的路径
运行flutter命令
有俩种方式
第一种是通过打开解压的flutter文件，双击flutter_console.bat打开命令行，然后在命令行中运行flutter命令，如图：

第二种是绑定环境变量，这样在任何命令行中都可以执行flutter命令。将自己的到flutter\bin这一步的路径复制粘贴到环境变量中，然后一直选择确定如图：
检测flutter
在命令行中，运行flutter doctor，检测flutter所需环境条件是否都满足，一般都有些问题，可以搜索一一解决。常运行此命令行，常有错，一一搜索解决。可以查看这篇解决
完成的界面如图：

初始化项目

通过命令行创建

通过命令行flutter create flutter_app创建新项目
如果想创建在自己想创建的文件夹中，先进入该文件夹的路径再创建项目
修改国内镜像源
修改这个是为了在运行的时候更快并且成功。如果运行没什么问题那就不改了。根据视频修改，但是代码已经更新了，函数放在了不同的位置，所以这里我只修改了一处，flutter > packages > flutter_tools > gradle > src > main > groowy，双击打开如图文件。

作如下修改：
回到命令行进入文件夹cd flutter_app
启动模拟器
命令行flutter emulators，可以看到自己目前有的模拟器

然后命令行flutter emulators --launch 自己命令行id
运行项目
命令行flutter run
体验热重载
打开vs code中创建的项目中lib > main.dart，修改一下，control+s保存，回到命令行，输入r，可以看到模拟器的标头也跟着改变了，这就是热重载。

但是这样改一次，再回到命令行运行一次不方便，可以通过vs code操作实时更新效果。
回到vs code，选择如图：

然后在代码中修改就可以实时看到效果了

搭建过程所遇问题

在Android Studio中安装虚拟设备时，会遇到报错Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows，我是通过这篇文章解决问题的。
查看设备是否开启虚拟化支持
命令行运行systeminfo，如图，确保在固件中启用虚拟化设置为是，如果是否，那需要在BIOS中设置

1.1 打开BIOS
重启电脑
在启动期间看见电脑logo，快速按F10
进入BIOS模式，不同电脑可能进入方式，界面不同
1.2 启用Hyper-V

然后重启电脑，最后启用虚拟设备看看是否成功。
运行flutter doctor命令行报错An HTTP error occurred while checking "https://github.com/ ":信号灯超时时间已到
看这篇和这篇解决