草庐IT

Flutter入门教程(二)开发环境搭建

不知名前端李小白 2023-03-28 原文

学习Flutter,首先需要搭建好Flutter的开发环境,下面我将一步步带领大家搭建开发环境并且成功运行flutter项目。

Flutter环境配置主要有这几点:

  • 系统配置要求
  • Java环境
  • Flutter SDK
  • Android 开发环境

***以下是基于在Window操作系统上安装和配置Flutter开发环境***

一、系统配置要求?

  • 操作系统:Windows 7 SP1 或更高的版本(基于 x86-64 的 64 位操作系统)
  • 磁盘空间:除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间
  • Git环境:要让 Flutter在开环境中正常使用,就要有git环境

二、Java 环境配置?

这里需要安装 Java 环境,因为Flutter是基于Android的,这里就不多细说

Java环境下载地址:Java Downloads | Oracle

这里直接下载64位安装包,解压一直点下一步下一步就搞定了,默认是安装到C盘,也可以自己选择喜欢的位置进行安装。

怎么检测java是否安装成功呢?

1、进入“黑窗口”:快捷键: win+R ,输入cmd,按下回车

2、可以选择输入 java  javac  java -version 三个doc命令进行检查

  • 输入java+回车,出现如下结果证明安装成功:

  •  输入javac,出现如下结果安装成功:

  •  输入java -version,查看Java版本,也可以证明你的java安装成功

三、Flutter SDK?

 Flutter SDK下载地址:https://flutter.cn/docs/development/tools/sdk/releases

 选择最新版本下载即可,下载成功后将压缩包解压,解压存放路径放在你想放置 Flutter SDK 的路径中(我的是D:\Android\flutter)

?注意:请勿将 Flutter 安装在需要高权限的文件夹内,例如 C:\Program Files\?

我们可以在控制台输入 flutter 命令看是否安装成功,如果输出如下界面就表示flutter安装成功啦:

 不要高兴的太早,虽然flutter SDK安装成功了,但是现在控制台还不可以使用 flutter 命令操作其他业务,需要将 Flutter 的运行文件路径加入到 PATH 环境变量:

?右击【此电脑】选择【属性】==>选择【高级系统设置】==>选择【环境变量】,在【用户变量】一栏中,选择【Path】这个条目

 

 ?双击进入Path条目,点击【新建】将你安装的flutter坐在完整路径作为新变量的值

然后一直点击确定就OK啦

 

在将 Path 变量更新后,打开一个新的控制台窗口:输入 flutter doctor 命令,如果它提示有任何的平台相关依赖,那么你就需要按照指示完成这些配置。

简单来看,doctor是医生的意思,顾名思义就是对flutter环境进行检查,并将检测结果以报告形式呈现出来,然后根据检查报告依次解决现有环境缺陷问题

这里如果是刚安装flutter,有些检查项带有红色的[×],我这里有显示[√][!]

  • [×]表示还不能正常运行
  • [!]表示还存在一些问题
  • 只有全部为[√],系统环境才是完全安装好,你的检查报告才是没毛病的

有叉的选项可自行复制搜索,都有解决方案的,这里就不一一例举了,结尾会列部分叉踩坑解决方案

现在就来看看上述这个警告,根据它的提示,我们只需要执行: flutter doctor --android-licenses ,执行这条命令后,会有一系列选择,全部选择y就好(我也不知道它是个啥,感兴趣的小伙伴可以自行研究)

然后我们再来执行: flutter doctor 

 出现这样全部为√的选项则你的环境就完全安装好了?

四、设置Android开发环境?

到这里我们已经正确安装flutter开发环境,但是还需要配置下Android的开发环境,因为Flutter 依赖 Android Studio 的全量安装来为其提供 Android 平台的支持

?安装 Android Studio

Android Studio下载地址:https://developer.android.google.cn/studio

?安装Android SDK

Android SDK下载地址:https://www.androiddevtools.cn

进入官网我们首先找到 SDK Tools 选项:

点击下载Android SDK压缩包:

下载成功并解压安装到自定义目录,解压后文件目录如下:

 

 运行 flutter doctor 确保 Flutter 已经定位到了你的 Android Studio 的安装位置。如果 Flutter 并未定位到,运行 flutter config --android-studio-dir <directory> 设置你的 Android Studio 的安装目录

?创建虚拟机

首先打开我们的Android Studio开发工具,第一次安装打开界面的左侧选择【Plugin】选项,然后搜索并安装【Flutter】插件,安装【flutter】插件的同时一并安装了【Dart】插件。

安装好插件后,我们创建一个Flutter项目:

 

 这里需要选择你的Flutter SDK安装目录,点击【Next】,输入项目名称:

 

?注意:项目命名规范一般是单词小写,多个单词之间用_连接,如:hello_world?

填写完毕后点击【Finish】完成,打开项目进去界面,选择工具栏的【Tools】,选择【SDK Manager】

 

正确填写Android SDK所在目录:

 安装所需工具包(这个可以在后期视情况而定选择下载,这里只是做一个演示):

然后同样在Tools选项下选择【Device Manager】,点击【Create device】按钮创建虚拟机:

 这里自行选择机型,然后点击【Next】:

选择一个系统映像并下载(这个过程可能需要几分钟):

下载完成后点击【Next】,继续点击【Finish】完成,然后点击启动按钮,等待虚拟机开启即可:

 ?运行flutter项目

虚拟机启动后,我们只需要点击编辑器右上角debug就可运行查看flutter项目:

这一过程可能需要等待一会儿:

至此,我们的flutter项目就成功运行啦~~?

当然,我们修改main.dart文件内容时,模拟器也是实时更新的:

 五、总结?

至此,我们从搭建项目环境到运行flutter项目整个流程梳理完成,再进行一次总结:

  • 首先要本身电脑系统配置达到指定要求
  • Java 环境搭建
  • 获取Flutter SDK
  • 设置Android Studio开发环境
  • 创建虚拟机

 

*****注意?:本系列均参照Flutter官网进行整理*****

有关Flutter入门教程(二)开发环境搭建的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  4. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反? - 2

    这似乎非常适得其反,因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误,一个名为UnixSocket的类显然在Windows机器上不能正常工作,等等)。我只是在浪费时间吗?我应该转向不同的脚本语言吗? 最佳答案 我在Windows上使用Ruby的经验很少,但是当我开始使用Ruby时,我是在Windows上,我的总体印象是它不是Windows原生系统。因此,在主要使用Windows多年之后,开始使用Ruby促使我切换回原来的系统Unix,这次是Linux。Rub

  5. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候,windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表,但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题),加之暑假之后对cmake实在是爱不释手,且这样配置确实十分简单(其实都不需要配置),故斗胆妄言vscode下配置CV之法。其实极为简单,图比较多所以很长。如果你看此文还配不好,你应该思考一下是不是自己的问题。闲话少说,直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么,我不说是谁。CMake是一个开源免费并且跨平台的构建工具,可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  9. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  10. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

随机推荐