从零开始用Flutter制作APP——第一章 配置Flutter开发环境

Flutter是谷歌的移动UI框架,Flutter的目标是做到只编写一份代码便可以在安卓、iOS、网页和桌面系统(像Windows、OS X、Linux等桌面操作系统)和谷歌正在开发还未正式面世的全新操作系统Fuchsia中直接运行,并原生原生支持以120FPS的速度持续渲染。

这个框架如果成熟后完全有可能成为主流的UI框架,在某种程度上说学习这个框架也是在窥见未来的操作系统的面貌。

因此,即便我个人对这个框架的熟悉程度还不足够,但是为了将这个框架分享给大家,我还是将我自己学习Flutter这个框架中遇到的问题和学到的方法以文章的形式记录下来并与大家分享。

所以话不多说我们来尝试编写一个最基础的DEMO吧,但是我们还没有运行环境呢(手动狗头),这一章,我就来讲讲如何配置一个能够运行Flutter的环境吧。

因为我本人使用的是Windows开发安卓APP,所以之后的文章中使用环境均为Windows,APP均代指安卓APP,所以我就说说,Windows环境下如何配置出可以编译运行安卓APP的环境。

因为考虑到安装编译环境有可能导致某些真·专业软件无法使用,所以我将在评论(文章结尾)中提供已经配置好的VMware15的虚拟机的百度云链接,需要的可以直接下载使用。(文中截图均为虚拟机内截图,部分图片会出现未激活水印,这是正常现象,有需要的可以自行激活虚拟机中的系统。)

第一步,下载必要软件

我们首先来看看使用Flutter的最低要求是多少。

在Flutter官网内的这个网页里:https://flutter.dev/docs/get-started/install/windows

介绍了系统最低要求为Windows7SP1,硬盘最低有400M空间,然后必须安装Windows PowerShell 5.0以后的版本(这个软件Windows10自带)和Git for Windows 2.x版本。

因为仅有Flutter框架还不能正常运行使用,我们还需要一个IDE(Integrated Development Environment,集成开发环境),这里我没有选择Visual Studio Code编辑器作为编译环境,因为VSC没有足够强大的功能支持Flutter的某些简单的面板操作,所以我选择更方便也更适配安卓手机方便进行调试的Android Studio作为我们的主要编译环境。(但是提醒一下,AS并没有中文,因为专业词汇多,仅有英文版本可选。)

因为IDE的原因,我个人不建议以Windows10以下的操作系统进行开发,并且建议至少有一块容量在50G以上的SSD作为系统与环境的储存盘,并储存工程文件。

所以知道了要什么软件,那就去官网下载吧。

首先是Flutter:

Installflutter.dev《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

打开上面的网址,点击下面If you’re in China, first read Using Flutter in China.中的蓝色链接

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

进入中国镜像站(官方的,不会被墙)然后从Mirrored URL中下载1.0.0版本Flutter

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

等待的过程中下载第二款软件,Git:

Git – Downloadsgit-scm.com

直接点击电脑的那个按钮就开始下载

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

接着,是我们要使用的IDE,Android Studio:

Download Android Studio and SDK toolsdeveloper.android.google.cn《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

(这个也是国内官方镜像站,不会被墙)

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

点击下载,同意用户协议,开始下载

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

至此,第一步下载完成。

第二步,配置环境。

估计现在大家也还没下载完,那就趁着现在先配置一下环境变量吧。

首先,打开文件管理器,右键此电脑打开系统属性,点击左侧的高级系统设置,点击最下方的环境变量(打开了就不用关了,从这里开始几乎每做几步就要配置下系统/环境变量)。

然后,先添加一下用户变量(其实所有的变量都是用户变量和环境变量中择一进行配置就好了,我自己配置的时候傻了,全都配置了一遍以求保险,所以之后的图里面会有些奇怪,不要在意……)

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

新建(这里我就选用户变量吧)用户变量,在新窗口的第一行填入PUB_HOSTED_URL,第二行填入https://pub.flutter-io.cn确定。再新建一个,填入FLUTTER_STORAGE_BASE_URL和https://storage.flutter-io.cn,完成。最小化就好了,待会还会用到

这时候估计Flutter的zip压缩包已经下载完了吧,解压到一个随意的地方(路径中不要有空格,不要有中文!不然到时候有你哭的。)

然后安装Git,中间的选项看不懂没关系,一直点Next就行,默认配置就好,点到最后一个应该是Finish,然后完成安装。

接着,解压完的Flutter应该是这样的

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

然后点击运行flutter_console.bat

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

看到光标闪烁后敲入 flutter upgrade 命令,接着就会下载Flutter的最新版本,并且将Dart SDK下载到你解压的Flutter文件夹的bin文件夹的cache文件夹中(这个路径在未来万一AS崩了需要重新填入dart的路径的时候会用到)。

然后经过漫长的等待,Flutter终于更新到最新版本了。你将会看到这样提示

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

有两个报错对吧,那我们就来解决这些错误。

先将下载好的Android Studio安装到本机。依旧无脑下一步,安装完成后打开Android Studio,然后跟着图做就行

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

这个是询问你要不要发送一些数据给谷歌进行分析,自己根据喜好选择就好。

然后弹出需要下载组件,全选,然后继续等(手动狗头)

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

下载的同时我们再把刚才最小化的环境变量打开,还是一样,用户变量或者环境变量都可以,这里我就继续选用户变量这次不是新建,选中用户变量中的Path这个,点击下面的编辑。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

在新打开的窗口中选择新建,然后将解压出来的Fluttter文件夹的地址填进去最后加多一个\bin(用浏览再弹出来的窗口中选择flutter里面的bin文件夹也是可以的)。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

接着就是等了,等待Android Studio安装完全部组件,重新启动Android Studio。你就会看到这个界面

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

点击右下角的Configure,选择Plugins。弹出一个新的窗口。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

在新窗口中搜索Flutter,选择第一个下载。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

弹出一个窗口,确认下载第三方插件,accpet。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

然后提示要不要一同下载dart插件,当然要啊,yes。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

好,下载完会提示要重启Android Studio,确认就好,重启后会看到多出来一个选项,但是不要着急,还有一步没有做完,打开CMD,输入flutter doctor,确认是不是该完成了的都完成了,因为如果flutter doctor报错的话那就代表还有东西没完成,最终也是无法编译的。

正常来说会显示下面这张图。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

他显示有一个用户协议需要你先同意,所以我们输入flutter doctor –android-licenses

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

等待一小会,会弹出一大堆东西,反正我们也看不懂英文是吧。定睛一看,最后一看有个[y/n],那就好办了,无脑按y回车,直到出现这一行字,那就代表这个用户协议你同意了。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

最后,再试一遍flutter doctor,确认出现以下提示就代表配置工作已经完全结束了。(最后的提示是说没有链接安卓手机,这个由于虚拟机要公开所以我就不链接上去作示范了,免得留下驱动之类的东西。)

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

至此,最困难的一步完成了(恭喜,恭喜)

第三步,创建一个Flutter工程

我们回到Android Studio,选择新多出来的一个选项,新建Flutter工程。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

选择第一个Flutter应用,下一步。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

填写项目的名字,一般建议以默认的flutter_app开头,后接_你的项目名字(切记英文!)。第二个是flutter的安装目录,这个程序自动检测,除非你清除你在做什么,不然不要修改。

第三个是工程的存放目录(切记不要有空格和中文!)

第四个是简介,这个写不写你随意,似乎没有啥限制。填好后下一步

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

之后就有点意思了,就目前来说,不建议修改这一页的内容,以后真正做APP需要设置这些东西的时候我会再说这部分的内容。所以,直接下一步。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

然后你所看到的就是一个完整的默认DEMO了,如果你有安卓手机并且启用了USB调试的话,链接电脑点击右上角的播放按钮就可以真机运行这个DEMO了,至于DEMO是啥内容我先卖个关子,有能力的自己试一下真机编译运行就知道了。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

至此,本次教程结束。

下面是部分疑难解答:

第一,手机开了USB调试,但是Android Studio没有识别到,这种情况就需要Android Studio自带的Android SDK里面的一些小工具了,其中一个工具有个名字叫做ADB(Android Debug Bridge,翻译应为安卓设备调试程序,官方译名Android调试桥,真·机翻)。

然后我们将这个工具添加到环境变量中,这里还是添加到用户变量中(其实还是用户或者系统变量都可以的)

文件目录应该是你的Android SDK的安装位置加上\platform-tools,如果不清楚的话可以在Android Studio的环境设置中查找ASDK的安装位置。

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

然后打开CMD,输入adb看看可以使用了没有,如果出现下列文字说明ADB工具可用

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

之后用ADB命令链接安卓手机即可,简单说下可能用到的命令:

adb devices

adb kill-server

adb start-server

这几个命令非常常用,如果还需要其他命令请自行百度。

第二,我的账号名是中文或者账号中间有空格安装不了Android Studio的组件或者安装了但是flutter doctor检测没通过怎么办。(我是自己脑子秀逗了,之前还记得不能有空格的,结果安装虚拟机系统的时候把用户名改成了Flutter Study,这才有了如下的问题。。。。。。这个问题可以说是我搞这篇教程中最麻烦的部分也不为过)

如图

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

首先安装的时候选择另一个保证你能记住的位置,千万不能忘了,然后,添加环境变量,还是用户变量吧,添加ANDROID_HOME和你的Android SDK安装位置,像如图

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

然后修改Path变量,新建%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools变量,如图

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

​​​​​​​接着你就可以通过flutter doctor验证了,一般来说Android Studio能自动识别新的SDK地址的。

第三,之前的步骤我都做了,但是还有有问题怎么办。

首先检查一下你的环境变量都配置好了吗,我这里有几张图,你看看有没有哪里是缺少的,缺了的补上(如果之前没说到的就不用补,加了反而会出问题)(还有,只要看用户变量就可以了,系统变量不用看,那是我为了保险再做多了一遍)

《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》
《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

第四,我没有VMware15怎么办。

建议去官网VMware:

VMware Workstation Pro 15www.vmware.com

下载最新版(就是15),然后打开我所给的虚拟机,至于激活请自行解决,不过我又找到一篇文章可能对大家有用:

VMware 15注册码blog.csdn.net

如果安装过旧版,请确认旧版本已经卸载后再安装新版。

最后感谢CSDN、Flutter官方开发者网站、Flutter中文网、简书等网站对我本文的撰写提供的参考。

最后附上百度云链接:

VMware win10 虚拟机硬盘pan.baidu.com

提取码:mryw

友情链接:

缘起 · 《Flutter实战》book.flutterchina.club《从零开始用Flutter制作APP——第一章 配置Flutter开发环境》

(Flutter实战,我本人很推荐看这本书,说的比我好)

本文所有图片版权均为本人所有。

点赞