Flutter入坑笔记

520 阅读4分钟

前言

恰逢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 SDK,现在就是时候了。

安装Android Studio没什么好说的,推荐安装最新的。最新的Android Studio也集成了SDK管理器和AVD管理器。

安装好Android Studio后,在Android Studio中下载补充需要的sdk,并新建一个虚拟设备

值得一提的是,我们需要确定SDK Tool中安装了HAXM以启用硬件加速功能,但是直接安装却失败了(忘了截图),网上查了才了解到,还需要需要在Bios 将Virtualization Technology 设成Enabled。参考链接

修改后重启电脑,在SDK Tool中重新安装HAXM。

SDK Tool
安装时会让你选择最大占用内存,个人对这个没什么研究,就用的默认的。
设置内存占用

安装成功
然后便是新建虚拟设备:启动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命令,最后输入你要新建的项目名称,指定项目路径后便会自动创建项目。

项目结构
自此项目就新建完成了。 接着我们在模拟器中运行项目,首先在VS Code右下角找到设备配置,默认状态下一般是No Device,点击后,顶部的命令面板便会显示之前在AVD Manager配置的虚拟设备,选中之后我们就用这个虚拟设备运行项目。

选择虚拟设备
选择了虚拟设备后,Vs Code便会打开模拟器,在项目中按F5后,经过一段时间等待,项目就在模拟器中运行了。

运行状态
这时就可以看到项目的主界面默认已经写好了一个计数器,可以验证下是否能够正常使用。

同时Flutter具备热重载功能,只要修改了代码并保存,模拟器会自动重新渲染。

这篇文章是最近Flutter自学的一个总结,随着学习的深入,这个系列可能会继续写下去,如果有什么错误也请大家指正。