- Flutter实战指南
- 李楠
- 1537字
- 2021-04-04 00:06:10
1.5 在Windows下安装Flutter
下面看一下如何在Windows系统上安装Flutter。首先访问官网https://flutter.dev/,单击页面右上方的“Get started”按钮,然后选择“Windows”,如图1.13所示。
第一步看一下系统的要求,在Windows下安装Flutter需要Windows 7 SPI或更高的版本,硬盘空间也很重要,不能低于400MB,还需要安装两个工具,如图1.14所示。Windows PowerShell 5.0在Windows 10里已经预安装了,如果是Windows的其他版本需自己安装。另外一个工具是Git,可以在官网https://git-scm.com/download/winG下载并安装,Git的安装很简单,确认好硬盘空间后,单击“下一步”按钮操作就可以了。

图1.13 Flutter官方网站

图1.14 需要安装的工具
现在我们就开始安装Flutter,你可以从官网下载一个稳定版本,如图1.15所示。当你下载时,版本可能会与图1.15所示的版本不同,但不管怎样,你只要下载官网的稳定版本就可以。

图1.15 下载Flutter的稳定版本
下载完成后,把它解压到一个目录下,这个目录不是你的App目录,而是SDK目录。SDK是软件开发工具包,可以在系统上全局安装,然后从系统不同目录下使用它来创建Flutter项目,并使用这个项目,例如我们解压到D:\Progams\flutter目录下。这个目录可以自己指定。下一步进入这个目录,双击运行flutter_console.bat这个文件,它会弹出一个Flutter命令窗口,可以在这个窗口中运行Flutter命令,这里我们使用Windows自带的命令提示符,在使用之前需要配置一下全局变量,目的是让Windows能够找到对应的路径,如图1.16所示。选择控制面板并单击“用户”按钮,下一步单击“我的环境变量”按钮,然后编辑环境变量,单击“新建”按钮,输入安装的Flutter目录下的bin目录,然后单击“确定”按钮。

图1.16 配置环境变量
关闭所有的命令行,打开一个新的命令行,输入命令flutter,按下回车键。如果屏幕上显示的内容如图1.17所示,说明环境变量配置成功了,就可以在命令行中输入Flutter相关命令了,这样Flutter就安装好了。

图1.17 运行命令flutter后显示的内容
下一步安装Android Studio,访问网站https://developer.android.com/studio下载并安装,下载前需要同意一些协议,下载完成后,执行安装,确认勾选了Android Virtual Device这一项,如图1.18所示。

图1.18 勾选Android Virtual Device
选择安装的路径,可以使用默认的安装路径,也可以自定义,再单击“Next”按钮,执行安装程序,安装好后就可以启动Android Studio了。首次启动会弹出使用向导,提示你设置主题等个人偏好。
选择Android虚拟器这一步很重要,如图1.19所示确认勾选了Android Virtual Device,然后检查Android SDK的位置,这里使用默认的配置,单击“Next”按钮,再单击“Finish”按钮。这里提示大家,这一步需要很长的时间进行加载,因为安装过程中需要下载很多软件包。

图1.19 勾选Android虚拟器
在命令提示符中输入flutter create first_app来创建一个Flutter项目,项目名称中只能使用下画线,而不能使用空格和横杠,然后按回车键,Flutter会自动创建一些配置文件。
创建完成后,打开Android Studio,选择一个存在的Android项目,就是刚才创建好的Flutter项目。打开一个模拟器,因为开发阶段大部分功能是在模拟器上调试并开发的,然后再到真实的设备上测试。单击屏幕上方的“Tools”按钮,选择“AVD Manager”按钮,单击“+Create Virtual Device...”按钮创建一个新的模拟器,如图1.20所示。
首先选择一个设备,然后页面会显示创建向导。这里需要选择模拟器的系统,请选择使用最新的版本,单击“Next”按钮。最后配置Graphics,选择Hardware,如图1.21所示。单击“Finish”按钮,这样这个模拟器设备就创建好了。单击运行图标,如图1.22所示,模拟器就显示出来了。
下一步需要在Android Studio中安装缺少的依赖项和插件,单击IDE右上方的“Install plugins”按钮,如图1.23所示,然后重启。启动好后IDE右下角会有一个提示,如图1.24所示,建议安装插件,单击“Configure plugins”按钮,会弹出Flutter插件,单击“Accept”按钮,同时也会自动安装Dart插件,Android完成后需要再次重启IDE。回到命令提示符窗口,运行命令flutter doctor,命令提示符窗口会提示漏掉了哪些内容。

图1.20 创建一个新的模拟器

图1.21 配置Graphics

图1.22 启动模拟器

图1.23 安装插件

图1.24 配置插件
回到Android Studio,单击IDE右上角“▶”运行按钮,运行我们创建的这个Flutter项目,可以看到Flutter App已经运行到模拟器上了,单击“浮动”按钮,可以增加计数器,或者在项目的目录下运行命令flutter run来启动。