likes
comments
collection
share

flutter环境搭建

作者站长头像
站长
· 阅读数 21

刚开始接触 flutter 的过程是极其痛苦的,不是说这门技术栈有多难,而是它的开端——环境搭建就让人望而却步,太多的坑等着你来踩。接下来我们就来体验下 flutter 的环境安装和项目启动调试。

1. windows

1.1 安装 Android Studio

点击链接developer.android.google.cn/studio安装,选择默认配置、安装对应的包:

flutter环境搭建

下载完成后,安装 SDK Manager:

flutter环境搭建

flutter环境搭建

可能出现的报错:

  • Intel HAXM installation failed. To install Intel HAXM follow the instructions found at...

解决方式请参考文章:blog.csdn.net/qq_24033983…

直到出现如下图所示,说明该问题已解决:

flutter环境搭建

1.2 安装 fvm

关于 fvm 的安装,很多文章都会推荐通过 pub 来全局安装,即下面命令

dart pub global activate fvm 

通过这种方式安装好的 fvm 可能会出现闪退的情况,最重要的是你得要让 dart 这个命令能用的起来,那么你就得去 flutter 官网 flutter.cn/docs/releas… 下载稳定版本,然后再去配置 flutter 环境变量,但是你又得使用 fvm ,那么一开始配置的 flutter 的环境变量又得要修改。为了简便且不再去踩更多的坑,我们直接在github上下载 fvm。

fvm github下载地址:github.com/leoafarias/…

flutter环境搭建

配置 fvm 环境变量:

flutter环境搭建

其中 D:\fvm\default\bin 指向默认的flutter版本

1.3 下载 flutter sdk

公司关于 pad 的项目, flutter 使用到了 2.2.3 和 3.10.2 两个版本,我们通过 fvm 来下载版本

fvm install 2.2.3
fvm install 3.10.2

除了使用命令安装,也可以直接将从官网已经下载好的 sdk 解压到 D:\fvm\versions (安装路径按照自己实际的来)中,注意要将文件夹名称改成对应的版本号。

关于 fvm 的一些命令:

fvm releases 查看所有可以安装的flutter版本 fvm list 查看当前下载了哪些版本的sdk fvm install 2.2.3 安装指定版本的 flutter fvm remove 2.2.3 删除指定版本的 flutter fvm global 3.10.2 设置全局 flutter 版本 fvm use 3.10.2 设置当前项目的 flutter 版本

如果发现无法切换,可在命令后添加 --force

关于设置全局/切换 flutter 版本的命令需要在管理员身份下执行cmd或PowerShell

使用如下命令可以查看当前所有环境变量的设置情况:

flutter doctor

输入命令 flutter devices 可以查看可供运行的设备:

flutter环境搭建

1.4 安装 java sdk

对于 fluter2 的项目,需要去安装 jdk 和配置 java 环境变量,flutter3 开始不再需要。

我下载的 jdk 版本是 11.0.24,具体版本每个人按照自己的实际情况来,jdk 相关安装和环境配置请参考文章:blog.csdn.net/climber16/a…

1.5 配置安卓模拟器

flutter环境搭建

flutter环境搭建

flutter环境搭建

flutter环境搭建

flutter环境搭建

因为我们做的是pad端开发,因此修改AVD name为:pad

flutter环境搭建

启动模拟器:

flutter环境搭建

flutter环境搭建

2. macOS

2.1 fvm 及 flutter sdk 的安装

 sudo softwareupdate --install-rosetta --agree-to-license

对于 fvm ,我们可以直接使用 homebrew 来安装:

brew tap befovy/taps
brew install fvm

如果出现如下图所示情况:

flutter环境搭建 则需要你安装上述第一条命令或者使用 brew update 来升级你的 homebrew

当然你也可以上文叙述中那样,直接在 github 手动安装

接下来配置环境变量,输入命令打开 .zshrc 或 bash_profile

open ~/.zshrc 
或 open ~/.bash_profile

在打开的文件中输入:

export FVM_HOME="$HOME/.fvm"

保存并关闭文件并在终端输入如下命令使配置立即生效

source ~/.zshrc
source ~/.bash_profile

通过命令fvm --version来查看 fvm 版本

通过 fvm 来安装 flutter 各个版本的操作同上文即可。操作过程遇到的问题解决方式请参考如下两篇文章:

www.jianshu.com/p/8f792a475…

blog.csdn.net/phunxm/arti…

如果使用了上述方式之后 fvm 命令还没生效,那么就直接暴力点,直接去官网下载 flutter,并配置 flutter 环境变量。

然后通过命令dart pub global activate fvm 来安装 fvm,配置环境变量:

export PATH="$PATH":"$HOME/.pub-cache/bin" 

要记得去掉之前通过 homebrew 安装 fvm 的环境变量,然后通过 fvm 安装几个你需要的 flutter 版本并设置一个当前全局使用的 flutter 版本。这个过程可能会出现你安装了一个新的版本会将前一个版本覆盖的情况,目前还不知道是什么原因,我这边出现了,解决方式就是多安装几次直到那你通过命令 fvm list 查看到你安装的所有的 fluuter 版本。

使用下面命令查看你的 flutter 的安装路径:

which flutter

你会发现你的 flutter 路径还是指向你在官网下载的 flutter 版本放在本地的路径,使用 fvm 全局设置的 flutter 路径并没有被正确指向。这时候需要修改通过官网下载的 flutter 的环境变量:

export PATH=$HOME/fvm/default/bin:$PATH

另外要注意的是当你输入source ~/.zshrcsource ~/.bash_profile后,flutter 路径还是没有正确指向的话,需要你关闭当前的终端再次打开即可。

至此,你就可以通过 fvm 随意切换使用 flutter 版本了。

2.2 安装 java sdk

我这边安装的是 jdk 11版本,官网下载

flutter环境搭建

在终端执行以下命令,查看是否安装成功:

/usr/libexec/java_home -V

出现如下图所示版本信息,则说明安装成功了:

flutter环境搭建

将上图圈出来的路径复制一下,配置环境变量:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

执行查看java版本命令

java -version

至此java sdk安装成功!

2.3 Android Studio及安卓模拟器安装

同上文 windows 一样配置即可,不再赘述。

3. 项目的创建和启动

3.1 开发工具

flutter 的开发工具一般都是用 Android Studio,我这里为了方便,选择 vscode 作为 flutter 的开发工具。

3.2 插件安装

建议安装以下插件:

主要是前两个插件,后面几个随意。

3.4 创建项目

3.5 启动现有项目

3.5.1 安装包依赖

在项目文件 pubspec.yaml 中点击右上角下载,会自动安装包依赖,这个过程可能会较长

flutter环境搭建

或者通过以下命令来安装:

flutter pub get

安装的过程中可能会出现一些报错:

  • Flutter unable find git in your PATH

这个问题是 git 权限问题,首先要确认你已经安装了git,执行以下命令来解决:

git config --global --add safe.directory '*'
  • Could not read from remote repository

这个问题是没有远程仓库的权限。查看 pubspec.yaml 文件,发现需要安装 pad-common-lib 的库

flutter环境搭建

这个是我们内部的库,我是有该库项目的gitlab的权限的,真正的问题在于这个库的url写的不是http形式,而是git形式的,而这需要在gitlab里面去配置密钥的。我这几天换了台电脑,账户名称也换了,所以需要在gitlab添加新的key密钥。

  • 还有可能报一些关于 java 的错误

这要看你的flutter是哪个版本的了,如果是flutter2大概率是你没有安装 jdk 和配置 java 环境;如果是flutter3项目,那可能是你的 Android Studio 安装出了问题,需要 flutter doctor 命令做进一步检查。

3.5.2 运行

在项目中启动调试:

flutter环境搭建

选择上面步骤创建好的 pad 这一项:

flutter环境搭建

第一次启动会是很漫长的过程,可能需要几分钟,当看到如下画面,即启动成功:

flutter环境搭建

点击右上角设置标志,填写你要连接的项目环境地址:

flutter环境搭建

这个过程中可能会出现的报错:

  • Exception in thread "main" java.net.ConnectException: Connection timed out: connect

这是无法下载 gradle 导致的。打开项目文件 gradle-wrapper.properties 找到当前 gradle 版本,如图所示:

flutter环境搭建

解决方式:

(1)用腾讯镜像 mirrors.cloud.tencent.com/gradle/grad… 取代项目中 gradle 下载地址

flutter环境搭建

(2)从官网下载当前版本 gradle 对应的zip文件,修改 distributionUrl 为你所下载的zip文件本地路径,下面给出路径示例:

win地址:
distributionUrl=file:///C:/Users/xxx/Downloads/gradle-7.6-all.zip

mac地址:
distributionUrl=file:///Users/xx/gradle-7.6-all.zip
  • Exception in thread "main" java.util.zip.ZipException: zip END header not found

这个是 gradle 版本不对的问题。一般而言,有版本冲突都是降低当前版本来解决问题,但我遇到的这个就反其道而行之,当我将 gradle 版本升至 7.6 的时候就跑起来了!

  • Unable to find bundled Java version

这个报错解决方案参考文章:

blog.csdn.net/crasowas/ar…

  • Unable to make field private final java.lang.String java.io.File.path accessible

解决方案参考文章:

blog.csdn.net/crasowas/ar…

  • 项目启动成功,模拟器页面显示正常,但后续可能会出现白屏情况

这时候需要卸载掉模拟器中的关于该项目的app,然后重新启动该项目即可。

转载自:https://juejin.cn/post/7398342795435982902
评论
请登录