Flutter 入坑:开发环境的配置

这是一篇经历两天的折腾才成功之后写下的博客…
也算是记录一下自己的学习过程了~

近期呢,想学习一下也不算新出的Flutter.js,至于其介绍什么的呢,官网讲的很是清楚了,话不多说,我们直接来看看怎么配置Flutter的开发环境吧。

本人电脑环境为:
window10 64位
Git
java环境

我的配置过程主要参考了Flutter 中文网的开发环境配置过程:
小伙伴也可以直接前往:
https://flutterchina.club/setup-windows/

1. 使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,我们将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

也就是配置我们的环境变量:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
好的,我们这样我们就配置好我们的环境变量了~

2. 下载Flutter SDK

首先我们需要下载Flutter SDK:
去flutter官网下载其最新可用的安装包 :
https://flutter.io/sdk-archive/#windows

我在这里呢也提供我下载的版本,不嫌弃的小伙伴可以使用:
链接:https://pan.baidu.com/s/1RsltJCkxfjOs5PysKQKutg
提取码:4ca8

将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。
我呢,就放在C:\src\flutter里面了。

在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

当然,这只是临时窗口,我就把他配置到环境变量里面去了:
在这里插入图片描述
这样我们就可以随时使用命令行了

3.运行 flutter doctor

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:

 flutter doctor

现在我们肯定会看到一些报错:
可惜没有保存下来过程的截图,下面的某些截图可能来自其他人,如若侵权,联系即删:
大概呢就是这样:因为我们还没有安装Android Studio
可能还有些伙伴还多了一些,想我的话就安装了idea和Vs code,这样的话也会有提示Flutter的插件没有安装(可惜没有截图了~)
在这里插入图片描述

4.安装Android Studio

官网下载传送:https://developer.android.com/studio/index.html
我的下载版本分享:
链接:https://pan.baidu.com/s/1zQw-wZvhhAs3SUxH0cfRbA
提取码:syzx

安装过程基本是默认安装:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样我们就安装完成了~
打开就是下面这样:
在这里插入图片描述
然后我们需要去配置相关代理什么的:
在这里插入图片描述
这个是我的配置:
那两个网址也给大家复制出来:
https://plugins.jetbrains.com/
mirrors.neusoft.edu.cn
在这里插入图片描述
关于SDK的话,我是使用了里面提示我的下载给下载了:
好像是一开始安装好就有一个弹框,然后我就顺着操作了。

这里可以看到我的下载版本:

在这里插入图片描述
在这里插入图片描述
如果忽略了前面的弹窗的朋友们好像这里是不能选的,如果印象没有出错的话。
但是也还是会有下面这种提示的,你按着提示也能下载完成。在这里插入图片描述
这样的话,我们的SDK还有tools就安装成功了~

但是不要忘记去配好我们的环境变量哦,不然是会出现问题的呢:
将Android Studio的路径配置到ANDROID_HOME变量中:
在这里插入图片描述
我忘了我是不是遇到什么问题了,也将这个路径配置到了path变量中:
在这里插入图片描述

5.安装Android Studio 中的Flutter和Dart插件

我们点击Plugins进入插件下载页面:
在这里插入图片描述
搜索Flutter,进行下载,会一起下载Dart的:
在这里插入图片描述
这个就是下载之后可以看到的:
在这里插入图片描述
还有首页的:
在这里插入图片描述
这样就可以了~

6.执行检查flutter doctor

这个时候我们再去验证一下:
在这里插入图片描述
发现我们已经装好了Android Studio 还有其需要的Flutter和Dart插件了,也就是第三项已经打上了绿色的勾勾。

那我们要解决一下第二个提示我问题(能到这一步我可是遇到了不少问题,甚至还卸载重装过),也就是我们要同意它的许可证
按照提示呢,我们就输入:

flutter doctor --android-licenses

然后我们一路y就可以了
在这里插入图片描述
我们再次检查的时候,就可以发现这个错误已经解决了
在这里插入图片描述
还有提示idea没有安装插件的提示,我们暂时先不需要管,应该下载完插件就不会有的了。
最后一个呢是提示我们还没有安装虚拟设备,也是没有大问题的。

可以创建Flutter项目了。

附录:
记录一个因jdk版本过高而报错的问题:

Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
instructions.

以上这个问题,可能有不同的原因,我找了好久才发现是因为我的java jdk版本过高,于是降到1.8.0就解决了~

在这里插入图片描述
总结:没有从一开始就记录,文档可能还是不够全,期间遇到各种各样的问题,搜索过各种各样的博客,如果能够记录下遇到的各种问题就更好一点,但是解决问题的关键就是jdk版本问题,这个印象深刻,还好没有放弃,最后还是完成了!开心!!

后续:

创建第一个Flutter项目以及成功运行已经实现了,传送:
链接: 创建 FLutter第一个应用Hello World.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值