欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Windows下Flutter+Idea环境搭建及配置

程序员文章站 2022-06-15 10:22:10
最近正式入坑flutter,首先从环境搭建开始,看了网上好多关于windows环境搭建的资料,基本都是按官方文档写的,看完的感受是,还不如直接去看官方文档。英文文档传送门:get started: i...

最近正式入坑flutter,首先从环境搭建开始,看了网上好多关于windows环境搭建的资料,基本都是按官方文档写的,看完的感受是,还不如直接去看官方文档。

英文文档传送门:get started: install on windows

中文文档传送门:get started: install on windows

本文主要总结我实际搭建的过程,最后发现不一定按网上那些博客或者官方文档写的来也可以搭建成功。

总的来说需要的也就4样东西,找齐了配置一下就ok;

  • (1)flutter sdk (建议下载官网的,下载完直接能用)配置环境
  • (2)准备ide(android studio或者intellij idea)配置flutter的sdk即可 建议使用 android studio 会少些麻烦
  • (3)下载dart插件
  • (4)下载flutter插件
  • (5) 解决问题

安装flutter sdk

首先下载官方文档中 flutter_windows_v2.5.1 压缩包(如下图红框中所示),解压到自己指定的位置,解压完文件夹名称叫做flutter,这就是flutter sdk了(后面再ide中配置的时候需要)。同时在系统path中添加flutter中bin所在的路径

注意,不要将flutter安装到需要一些高权限的路径如c:\program files\)

Windows下Flutter+Idea环境搭建及配置

安装flutter

在刚下载的flutter目录下找到flutter_console.bat文件,双击可运行文件,(这里网上有好几种方法进行flutter的安装,比如说打开运行,输入powershell,然后运行flutter doctor,我试过都有问题,还是用官网的这种方法最靠谱),然后输入指令:flutter doctor,即可自动安装,这个是官网推荐的方法,很靠谱。但是由于我们的国策,使用上面那种方法会一直处于以下的界面:

Windows下Flutter+Idea环境搭建及配置

最后直接显示超时:

Windows下Flutter+Idea环境搭建及配置

所以,我们使用国内镜像的地址去下载: 在输入flutter docter之前输入以下两句:

  • 1)命令行输入第一条: set pub_hosted_url=https://pub.flutter-io.cn
  • 2)命令行输入第二条:set flutter_storage_base_url=https://storage.flutter-io.cn
  • 3)再次输入flutter doctor 命令即可执行成功

以上完美解决:got socket error trying to find package mockito at https://pub.dartlang.org.这个问题。

Windows下Flutter+Idea环境搭建及配置

Windows下Flutter+Idea环境搭建及配置

出现这个安装成功。

如果出现下面这个问题请按照下面步骤修复,主要是因为 我们使用的是 idea 没有使用 android studio 没有安装 android sdk 需要手动安装配置

Windows下Flutter+Idea环境搭建及配置

下载sdk manager tools

这里下载,在官网下拉,在command line tools only里下载对应平台的sdkmanager;

Windows下Flutter+Idea环境搭建及配置

下载后解压得到文件夹 cmdline-tools, 我们的android sdk放在 d:\android\sdk下,解压后的目录最好放在f:\android\sdk\cmdline-tools\latest里,否则当执行sdkmanager时会报错

Windows下Flutter+Idea环境搭建及配置

执行一下sdkmanager --list命令

Windows下Flutter+Idea环境搭建及配置

没有报错,命令成功执行

原因分析及解决方法来源:https://*.com/questions/65262340/cmdline-tools-could-not-determine-sdk-root

下载需要的平台及工具

执行sdkmanager “platform-tools” “platforms;android-29”

下载需要的平台及工具,我准备的android系统是10 ,对应平台为29

Windows下Flutter+Idea环境搭建及配置

输入y同意许可,等待下载完成

Windows下Flutter+Idea环境搭建及配置

检查一下sdk目录发生了变化

Windows下Flutter+Idea环境搭建及配置

执行命令sdkmanager “build-tools;28.0.3”,下载build-tools,

Windows下Flutter+Idea环境搭建及配置

Windows下Flutter+Idea环境搭建及配置

先执行一下 flutter config --android-sdk f:\android\sdk,指定一下android sdk路径,在执行 flutter doctor --android-licenses 来修复许可

Windows下Flutter+Idea环境搭建及配置

一路填 y,直到执行完毕

Windows下Flutter+Idea环境搭建及配置

再次执行flutter doctor命令

Windows下Flutter+Idea环境搭建及配置

配置环境变量

新建环境变量andriod_home,值为sdk安装目录,如f:\android\sdk

Windows下Flutter+Idea环境搭建及配置

配置环境变量path,加入%android_home%\tools,%android_home%\platform-tools和%android_home%\build-tools

Windows下Flutter+Idea环境搭建及配置

至此,flutter 和 android sdk的配置已经进行完毕

安装dart和flutter插件

(1)flutter需要如下两个插件的支持:

  • flutter 插件用来支撑flutter开发者的流程(运行,调试,热加载,等等)
  • dart插件则提供代码分析(代码合法性校验,代码补全等等)

(2)然后在android studio或者intellij idea 中下载dart插件,假如下不了,那就是没有进行*的原因,也可以通过*访问下面的链接进行下载。假如是自己通过如下链接下载的,则把下载后的zip包解压后将整个文件夹复制到你使用的ide的plugins文件夹中(整个文件夹拷贝到plugins下即可)。

https://plugins.jetbrains.com/pluginmanager/?action=download&id=dart&build=iu-172.3757.52&uuid=076050b4-d279-493c-945e-5fb3ff2af32e

(3)然后在android studio或者intellij idea 中下载flutter-intellij插件,假如下不了,那就是没有进行*的原因,也可以通过*访问下面的链接进行下载。假如是自己通过如下链接下载的,则把下载后的zip包解压后将整个文件夹复制到你使用的ide的plugins文件夹中(整个文件夹拷贝到plugins下即可)。

https://plugins.jetbrains.com/pluginmanager/?action=download&id=io.flutter&build=iu-172.3757.52&uuid=076050b4-d279-493c-945e-5fb3ff2af32e

配置dart和flutter插件到我们的idea中

打开idea,create new project——>选择flutter,选择sdk路径后next——>命名项目名(小写),选择项目存储路径后ok。

Windows下Flutter+Idea环境搭建及配置

Windows下Flutter+Idea环境搭建及配置

然后进去以后可能你看到并没有下载项目资源,不要慌,我们配置一下,具体的如下所示,第一张是配置dartsdk的路径(指向前面flutter的sdk中的 bin\cache\dart.sdk),第二张是配置flutter sdk路径。配置完成后重启ide,再重新创建新项目即可,等待的时间会比较长,耐心等待完成就可以了。

Windows下Flutter+Idea环境搭建及配置

Windows下Flutter+Idea环境搭建及配置

我们第一次运行是需要创建一个模拟器,需要根据 andriod sdk 下载对应镜像,在settings里找到android skd的配置,点edti

Windows下Flutter+Idea环境搭建及配置

在弹出窗口中点next 开始下载

Windows下Flutter+Idea环境搭建及配置

Windows下Flutter+Idea环境搭建及配置

下载完成需要等待一定时间,下载完毕点finish按钮

下载需要的系统镜像

Windows下Flutter+Idea环境搭建及配置

Windows下Flutter+Idea环境搭建及配置

接着就可运行项目,配置运行到 chrome (web)

Windows下Flutter+Idea环境搭建及配置

运行结果

Windows下Flutter+Idea环境搭建及配置

至此,配置完毕

到此这篇关于windows下flutter+idea环境搭建及配置的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持