Flutter实战入门系列(1)

最新推荐文章于 2025-12-12 23:12:07 发布

原创最新推荐文章于 2025-12-12 23:12:07 发布 · 315 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文是Flutter实战入门系列的第一篇，主要介绍了在Mac环境下安装Flutter SDK，配置Android Studio和Xcode的步骤，以及如何创建并运行第一个Flutter应用。通过执行命令行操作，安装相关插件，最终成功在模拟器上展示Flutter app。

概述

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

假设我们已经安装了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中方便的开发flutter app，我们还需要安装各自IDE的开发环境。

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

flutter doctor

按照提示完成所有安装后，再执行一遍flutter doctor, 结果应该如下所示。
在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

App运行效果如图，

在这里插入图片描述

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

在这里插入图片描述

简要介绍一下目录，

本节结束。