Flutter实战入门系列(1)

概述

Flutter是Google力推的进行跨平台开发应用的工具。
本系列文章的叙述环境为Mac OS 10.14.5, Android Studio 3.4.1, Xcode 10.2.1
本系列将介绍开发环境的搭建和创建第一个Flutter应用。

安装开发环境

下载Flutter SDK并安装

假设我们已经安装了Android Studio和Xcode。我们使用Flutter SDK在国内的镜像站点进行安装，所以先修改镜像站点的环境变量。

打开~/.bash_profile文件，在文末加入如下代码

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

随后命令行执行

source ~/.bash_profile

随后去Flutter官网下载SDK

将下载的包解压缩到本机目录，比如~\flutter\
将flutter命令的路径添加到环境变量PATH中

export PATH=~/flutter/bin:$PATH

至此，我们已经完成了flutter SDK的安装

配置Android Studio / Xcode toolchain

为了能够在Android Studio和Xcode中方便的开发flutter app，我们还需要安装各自IDE的开发环境。

很幸运，flutter SDK已经帮我们做好了，你只要在命令行执行下面的命令，flutter会帮你检查你本地的开发环境还有哪些工具没有安装。你只需要根据具体提示进行安装即可。

flutter doctor

按照提示完成所有安装后，再执行一遍flutter doctor, 结果应该如下所示。

打开Android Studio，在菜单中打开Preference->Plugins，搜索Flutter，安装flutter插件。

第一个Flutter app

打开Android Studio，进入菜单File->New->New Flutter Project->Flutter Application, 填入项目名称，点击下一步，完成即可。

在右上角选择iPhone Xr模拟器，点击Run，就会编译app并使用模拟器打开app，如下图

App运行效果如图，

在左侧栏，会看到Flutter的工程结构，

简要介绍一下目录，

• android : Android工程文件目录
• build : 编译配置和输出目录
• ios : iOS工程文件目录
• lib : Flutter源文件目录
• test : 测试文件目录
• flutter_app.iml : 工程配置文件
• pubspec.lock : 记录当前项目实际依赖信息的文件
• pubspec.yaml : 管理第三方库及配置的文件

本节结束。