Flutter 开发环境搭建和项目结构介绍

所谓:工欲善其事必先利其器,Flutter 应用开发同样要从开发环境搭建开始。

一、前言

如果想使用 Flutter 进行 iOS 和 Android 全平台的移动端开发,那么 Flutter 开发环境搭建最好使用 Mac 环境,Flutter 本身就是用于跨平台开发,在 Mac 上即可对 iOS 开发,也可做 Android 开发,但在 Window 下,只能进行 Android 开发。

二、Flutter 开发环境搭建

这里简单介绍 Flutter 的环境搭建步骤和搭建环境过程中遇到的各种问题及解决方法。

2.1 Flutter SDK 下载

进入 Flutter 官网 下载其最新可用的安装包, 选择 “Get started”,如下图:

如果是在国内,建议使用 Using Flutter in China ,不考虑下载速度,可直接选择上图中的 “macOS”,进入下载页,建议下载 Flutter 的 Stable 分支,这是 Flutter 稳定分支,如下图:

注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去 Flutter GitHub 项目下去下载安装包。

如要更新现有版本的Flutter,请参阅 升级 Flutter

2.2 环境变量配置

将上述下载的 Flutter SDK 文件解压安装包到自已选择安装的目录,并把路径添加到环境变量中。

示例:
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ export PATH="$PWD/flutter/bin:$PATH"

说明:

  • $PWD 指 Flutter SDK 目录
  • PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL 指 由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像
  • 脚本路径 指 当前用户的环境变量 “ ~/.bash_profile ”
实例:

vim ~/.bash_profile

运行以下命令验证 flutter/bin 目录在 PATH 中:

echo $PATH

2.3 安装 Homebrew

Brew 是 Mac 上管理软件的工具,如果已经安装了brew,跳过此步骤。官网
在终端命令行上,执行如下命令:

usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

检查 Ruby 版本及重定向命令:
gem sources -l //查看 ruby 源

补充: 最近 ruby-china 域名变化由 org 更改为 com如 https://gems.ruby-china.com

gem sources --remove  https://gems.ruby-china.org
gem source -a https://gems.ruby-china.com

2.4 安装 CocoaPods

本人操作过程中,最郁闷的就属这一步了。

CocoaPods 是 OS X 和 iOS 下的一个第三类库管理工具,通过 CocoaPods 工具我们可以为项目添加被称为 “Pods” 的依赖库(这些类库必须是 CocoaPods 本身所支持的),并且可以轻松管理其版本。

sudo gem install cocoapods  // Mac OS X 10.11前  输入这一条
sudo gem install -n /usr/local/bin cocoapods  //Mac OS X 10.11后   输入这一条

pod setup

pod setup 是将 Github 上的开源库都托管都安装 Podspec 索引安装到到本地。

执行 pod setup 这一步, 大约要下载 300 M 的文件,偏偏下载速度出奇的慢,有时还会出现 pod setup 出错,一旦出错,还得重新再来。后面通过分析原因无他,因为那堵墙阻挡了cocoapods.org……

解决方法:
  • 通过 VPN 环境,这样速度快了不少
  • 先下载 CocoaPods 到本地,然后同步到指定目录

VPN 环境不作说明,只要开启就可以,这里重点介绍未开启 VPN 情况下的配置。

  • 去 GitHub 上下载 CocoaPods
  • 解压缩包到本地目录
  • 修改文件夹名称,将 Specs-master 改名为 master
  • 把 master 文件夹 移到 ~/.cocoapods/repos 路径即可(如果没有 repo 目录,则先执行下 pod setup )

2.5 Flutter doctor

Flutter doctor,该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)

运行 “flutter doctor” 命令查看是否需要安装其它依赖项来完成安装:

不同情况下回 遇到很多不同情况,如果不成功可以通过 flutter doctor 来定位问题,按照提示进行操作即可。

三、Android Studio 的插件安装

Android Studio: 为 Flutter 提供完整的 IDE 体验,毕竟都是 Google 主推的,兼容性问题会少一些。使用 Android Studio 开发需要安装两个插件:

  • Flutter 插件: 支持 Flutter 开发工作流 (运行、调试、热重载等)
  • Dart 插件: 提供代码分析 (输入代码时进行验证、代码补全等)
步骤如下:
  • 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)



  • 选择 Browse repositories…, 选择 Flutter 插件并点击 install

  • 重启Android Studio后插件生效

OK,至此,所有开发环境已配置完成,可以进行实际开发。

四、Flutter 工程搭建

创建第一个项目,运行它,并体验“热重载”。

步骤如下:
  • 启动 Android Studio,通过观察,界面上多了一个 Start a new Flutter project 的菜单

  • 选择 Flutter application 作为 project 类型, 然后点击 Next

  • 选择 Start a new Flutter project 或 File>New Flutter Project ,输入项目名称,选择 SDK 路径和工程路径,然后点击 Next

  • 输入 包名 或 BundleId,是否与 Kotlin 或 Swift 交互(目前是没有),然后点击 Next

  • 点击 Finish,稍等片刻后展示工程界面,选择模拟器,加载运行

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态。简单的对代码进行更改,然后告诉 IDE 或命令行工具你需要重新加载(点击 reload 按钮),你就会在你的设备或模拟器上看到更改。

五、Flutter 项目结构介绍

通过一个简单的 Demo 了解 Flutter 的项目结构,首先工程目录如下:



整个目录主要分为四个部分:

  • 第一个部分是 Android
  • 第二个部分是 iOS
  • 第三个部分是类似 build.gradle的配置文件pubspec.yaml
  • 第四个部分是 lib 文件夹,里面存放我们编写的基于 dart 语言的源代码

前两个部分主要是生成的目录,可以通过 Android Studio 或 Xcode 导入工程;在跨平台开发中不会涉及到,我们主要是写 dart 来实现跨平台。


Refer