03 | Flutter 搭建第一个应用_flutter podfile

第一步：环境搭建

Flutter的配置主要分三部分

电脑：Mac
环境配置：sdk、jdk、Android sdk，路径设置等；
开发工具：Android Studio。也有人会使用 VS Code。对于Flutter，Android Studio也是官方支持的IDE，VS Code需要安装很多插件才能达到Android Studio一部分的效果，与其导出打补丁，不如直接用官方工具。
安装模拟器软件：Xcode、

1、安装Flutter

这里推荐 Flutter中文网 的安装文档。
在macOS上搭建Flutter开发环境技术胖，介绍的非常详细了

一. 下载Flutter SDK
去flutter官网下载其最新可用的安装包，官网地址需要翻墙，也可以去Flutter github项目下载安装包。

• 进入到 SDK下载 界面
• 选择macOS系统
• 下载最新的稳定版

二. 解压安装包到你想安装的目录，任意如:

 cd ~/yuqing/flutter
1

三. 配置环境

1. 找到环境变量文件
文件夹中隐藏文件可见 Command + Shift + .

• 如果使用默认的bash，则配置 ~/.bash_profile
• 如果使用zsh（Mac新系统默认zsh），则配置 ~/.zshrc

2. 怎么看自己电脑上是那个shell ？

输入命令：chsh，笔者电脑上的是 zsh

2、开始配置

3、在 .bash_profile 中配置Flutter
Mac新系统默认zsh，但电脑以前的环境变量都是配置在 .bash_profile 中？
1.打开终端工具，使用vim进行配置环境变量，命令如下：

vim ~/.bash_profile
1

2.添加 flutter 相关工具到path中:
export PATH=（自己放的文件夹flutter中bin文件的路径）:$PATH，然后保存。这一行代码，意思是配置flutter命令在任何地方都可以使用。

export PATH=/Users/yuqing/peizhi/flutter2.2.3/bin:$PATH
1

** 配置镜像**
由于一些flutter命令需要联网获取数据，如果在国内访问不成功，PUB_HOSTED_URL和FLUTTER_STORAGE_BASF_URL是Google为国内开发者搭建的临时镜像。

Flutter 镜像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1
2
3

3.配置完成后，需要用source命令重新加载一下 ，具体命令如下：

source ~/.bash_profile
1

接下来使用命令来检测一下，是否安装完成了。

4.flutter -h

flutter -h
1

5 .检查开发环境
安装好后Flutter，但是还不具备开发环境。开发还需要很多软件和插件的支持，那到底需要哪些插件和软件那？我们可以使用Flutter为我们提供的命令来进行检查：

flutter doctor
1

会提示缺少开发环境，检查是否安装好androidStudio和Xcode，需要Chrome还要安装Chrome。是否下载好androidSDK。

6.安装androidStudio和Xcode
flutter开发工具是androidStudio，使用的开发语言是Dart

7.同意android安装证书，准许协议

flutter doctor --android-licenses
1

然后让你输入Y/N的时候，一路Y就可以了。

8. flutter doctor报错 [!] Xcode - develop for iOS and macOS ! CocoaPods 1.9.3 out of date
   升级CocoaPods版本

sudo gem install cocoapods
1

9.flutter doctor报错
[x] Downloaded executables cannot execute on host. See https://github.com/flutter/flutter/issues/6207 for more information
解决方案：删除老版本的 flutter SDK , 安装最新版本的 Flutter SDK

[x] [!] Proxy Configuration ! NO_PROXY is not se

[x] cmdline-tools component is missing

[x]Xcode installation is incomplete; a full installation is necessary for iOS development.

[x] Dart SDK is not configured.
当我们从GitHub上下载别人的flutter项目时经常会出现这样的问题。
点击左上角AndroidStudio–>Preferences–>Languages & Frameworks–>Flutter 在右侧flutter SDK中选择flutter SDK所在目录即可，保存以后就可以正常运行了。

10.安装成功

11.flutter项目运行
更新Flutter项目里的三方插件使用：

 flutter pub get
1

新Flutter项目里的iOS中没有Podfile文件，随便添加一个三方插件运行flutter pub get就会自动生成Podfile文件

更新Flutter项目里的iOS中三方，在开发中项目对应的/iOS目录下更新pod：

pod install
1

编辑工具设定

Android Studio安装 Flutter 和 Dart 插件、

MAC下安装过程如下：
1、打开 Android Studio。
打开插件设置（在 v3.6.3.0 以上的系统打开 Preferences > Plugins）。
然后选择 Flutter 插件并点击 安装。
当弹出安装 Dart 插件提示时，点击 Yes。
当弹出重新启动提示时，点击 Restart。
2、重启后打开Android Studio，就可以创建第一个flutter项目了。

Android Studio安装AVD模拟器
1.现在需要一个虚拟机（模拟器）来运行我们的程序，可以点击Android Studio中的上方菜单tool -AVD Manager选项。
2.出现新建菜单，选择Create Virtual Device…。
3.选择虚拟机类型，这个你随意选就好，我选择的是Nexus 5x。
4.选择系统，这里尽量选择最新的，我选择了Android 10.0系统，选择好后，又是一个漫长的等待过程。
5.安装好后，点击开始按钮，运行虚拟机了（第一次运行，需要安装系统，会慢一些），运行起来。

常见问题

以下是大家很容易忽视的几个问题。

Android Studio 工具安装，Flutter 的配置运行需要依赖 Android Studio 来完成，因此在安装之前可以先准备好 Android Studio 的安装配置。
Anroid Studio 出现 unable to access android sdk add-on list，出现这个问题，可以修改 Android Studio 安装目录 bin 下的 idea.properties 文件，在文件最后一行增加如下配置。

disable.android.first.run = true
1

Android Studio 网络代理，如果你的网络有代理，也需要进行配置，如果没有正确配置，将导致 Andorid Studio 提示 flutter pub upgrade 无法正常更新。

Flutter Doctor 核心点检查。
点击 Finish 长久未响应（或者执行 flutter pub upgrade 未响应），这种情况会出现“This is taking an unexpectedly long time”提示，如果出现这个提示，很大可能是你的镜像配置没有按要求配置。你可以参考以下这段配置，第一个是 Flutter 的命令行工具，第二个则是 Dart 的命令行工具，后面两个镜像配置很关键。

PATH=$PATH:/Users/用户名/Downloads/flutter-main/bin
PATH=$PATH:/Users/用户名/Downloads/flutter-main/bin/cache/dart-sdk/bin
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1
2
3
4

Flutter SDK path not given，如果在创建 Flutter 项目时候提示“ Flutter SDK path not given“，则点击 Flutter SDK path 路径，然后选择我们前面安装的 Flutter SDK 路径即可。

Mac 系统上注意的点
Mac 下设置环境变量，其中涉及一些环境变量的配置，如下方法，永久设置。

sudo vim ~/.bash_profile
1

配置添加 Flutter 的安装路径，一般情况下会安装在你解压后运行的路径下。例如，下面我自己安装后的路径，安装完成后确定具体路径，然后在 bash_profile 文件中增加这行配置即可。

PATH=$PATH:/Users/用户名/Downloads/flutter-main/bin
1

最后再运行加载，并运行测试。

source ~/.bash_profile
flutter -h
1
2

Windows 系统上注意的点

环境变量的设置，如果在 cmd 下没有 export 命令，前往系统属性下 -> 环境变量，然后新建，按照变量名为 PUB_HOSTED_URL ，变量值为 https://pub.flutter-io.cn ，以及变量名为 FLUTTER_STORAGE_BASE_URL ，变量值为 https://storage.flutter-io.cn 进行配置，对应到官方文档如下配置。

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

配置 Flutter 运行环境，下载完成 Flutter SDK ，并放到指定的 C:\src\ 下，然后再次配置环境变量，需要在环境变量名为 PATH 的字段后面增加分号分割，并在分号后增加如下路径。

C:\src\flutter\bin
1

如果出现安装 Android SDK 时无法勾选 SDK ，需要重新卸载安装。这里需注意，在卸载时需勾选删除当前用户本地 Android Studio 配置，然后重新安装时，选择非 Program Files 目录。

其他错误

第二步：创建项目运行

选择新建一个 Start a new Flutter Project ，然后选择 Flutter Application 。
然后依次填写相应的 Project name 、Flutter SDK Path（如果配置好了会默认填写上，如果没有可以去重新选择）、Project location （具体的项目保存地址）、Descrition ，填写完成后，点击下一步，然后点击 finish 即可。

Flutter 项目目录结构
.idea 这个和 Flutter 无关，这里面主要是保留代码的修改历史。
android 这个目录主要是和 Android 原生平台交互的工程代码，其目录结构和原生的 Android 项目基本一致，但是一些配置和代码结构是不同的。
ios 这个目录主要也是和 iOS 原生平台交互的代码。
lib 这个目录下的文件为 Flutter 项目核心代码，其中包含了一个 main.dart 入口文件。
test 这个目录下的文件存放 Flutter 项目相关的测试文件。
pubspec.yaml 该文件为 Flutter 项目配置文件，包括了项目名、项目描述、版本、运行环境以及开发和正式环境的第三方库，该文件与我们熟悉的 package.json 作用是类似的。
pubspec.lock 这是自动生成的文件，里面指明了 pubspec.yaml 等依赖包和项目依赖库的具体版本号，该文件的功能和我们常见的 package.lock.json 作用类似。
.metadata 这是自动生成的文件，里面记录了项目的属性信息。用于切换分支、升级 SDK 使用。
.packages 这里面放置了项目依赖的库，对应在本机电脑上的绝对路径，为自动生成文件。如果项目出错或者无法找到某个库，可以把这个文件删除，重新自动配置即可。
.gitignore、README.md 与前端项目中的文件作用是一致的。

在开发过程中我们只需要关注三个核心部分，代码开发放在 lib 下，test 存放我们的测试文件，项目配置文件放在 pubspec.yaml 下。

第三步：调试

代码运行调试在各种语言中都是比较基本的知识点，在 Flutter 中也应该掌握，包含以下几类：

断点调试
核心是在断点处查看当前各个数据的状态情况，但是需要使用 debug 模式运行。

debugger 调试
在代码中增加一个断点语法，可以通过条件式的判断来进行断点，同样需要使用 debug 模式运行。