前言
恰逢Flutter正式发布,最近正好处于项目间隔时间,便利用此时间学习下这个传说中的移动端原生跨平台UI框架,写下此文以记录学习踩坑历程。
可能会不定期更新。
首先说明自己大部分学习的资料来自于Flutter中文网,此文章也是结合自己的实践进行重新整理。
一、环境搭建
1.首先是安装Flutter和环境搭建,自己的环境是Win10。按照官网给出的windows安装流程,首先我们需要配置两个用户环境变量:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
然而这两个命令并不能在windows中执行,export
是Linux的命令。刚开始就差点被官网小坑一把,于是自己老老实实的手动配置了。
不过后来查资料才发现windows下可以用set
指令来配置环境变量,不过自己没实践过。
2.然后便是获取FlutterSDK,解压后自己选择文件夹保存,注意,不要将flutter安装到需要一些高权限的路径如C:\ProgramFiles\
,你需要记住这个文件夹路径,以后再编辑器中需要配置。
3.在Flutter安装目录的flutter
文件下找到flutter_console.bat
,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。
如果你想再命令行中执行flutter命令,那么就需要在用户环境变量中的Path中追加flutter\bin
的路径。
此时我们在命令行中运行flutter doctor
便可以查看是否需要安装任何依赖项来完成安装。
安装Android Studio没什么好说的,推荐安装最新的。最新的Android Studio也集成了SDK管理器和AVD管理器。
安装好Android Studio后,在Android Studio中下载补充需要的sdk,并新建一个虚拟设备
值得一提的是,我们需要确定SDK Tool中安装了HAXM以启用硬件加速功能,但是直接安装却失败了(忘了截图),网上查了才了解到,还需要需要在Bios 将Virtualization Technology 设成Enabled。参考链接
修改后重启电脑,在SDK Tool中重新安装HAXM。
安装时会让你选择最大占用内存,个人对这个没什么研究,就用的默认的。 然后便是新建虚拟设备:启动AVD Manager 并选择 Create Virtual Device.选择一个设备并选择 Next。
为要模拟的Android版本选择一个或多个系统映像,然后选择 Next. 建议使用 x86 或 x86_64 image .
在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
验证AVD配置是否正确,然后选择 Finish。
二、配置编辑器
在windows环境下,Flutter为Android Studio和VS Code提供了提供了支持。由于本人本职工作是web前端,自然毫不犹豫优先选择了VS Code作为编辑器。不过之前安装的Android Studio依然是必须的。
首先我们需要1.21版本以上的VS Code,然后安装Flutter支持和Dart支持的插件,重新启动VS Code后,我们就可以在crtl+shift+p打开的命令面板中运行Run Flutter Doctor
命令了,和之前在命令行中运行的一样,回在VS Code下方的输出视图中显示依赖情况。
三、新建项目与模拟器调试
我们在VS Code中用crtl+shift+p打开命令面板,运行Flutter: New Project
命令,最后输入你要新建的项目名称,指定项目路径后便会自动创建项目。
同时Flutter具备热重载功能,只要修改了代码并保存,模拟器会自动重新渲染。
这篇文章是最近Flutter自学的一个总结,随着学习的深入,这个系列可能会继续写下去,如果有什么错误也请大家指正。