flutter开发入门（iOS）

这里以macOS为开发环境搭建，windows本人没用，有需要可自行百度。

一.开发环境搭建

1.更改镜像

国内flutter由于**原因被墙，官方提供如下镜像：

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

2.获取flutter SDK

方式一：手动官网下载安装包，下载地址：https://storage.flutter-io.cn/flutter_infra/releases/stable/macos/flutter_macos_v1.7.8+hotfix.3-stable.zip

下载完之后解压放在自己想要的目录下。

方式二：终端命令行克隆(这里我们克隆stable分支，也可以试试其他分支)

git clone -b stable https://github.com/flutter/flutter.git

3.配置flutter的PATH环境变量（简单理解：终端命令行驱动地址）

3.1 设置当前窗口的环境变量

先定位到刚才下载的futter sdk路径：

cd <flutter所在路径>
export PATH="$PATH:'pwd'/flutter/bin"

这里只是临时的设置环境变量，下次通过终端进入操作flutter都需要这一步操作，接下来我们教你设置永久的环境变量：

3.2 设置永久的环境变量

先打开mac上的隐藏文件，使用如下组合键：command+shift+.

定位到用户库文件目录：

cd $HOME
open ./.bash_profile

以上命令行操作也可以直接进入库文件目录找到.bash_profile文件，没有的话，我们可以用文本编辑创建一个，保存的时候以.bash_profile结尾就好了。

上面操作之后我们会打开.bash_profile这个文件，复制如下内容粘贴进去

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径，比如“~/document/code”

刷新终端窗口：

source $HOME/.bash_profile

注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

通过运行flutter/bin命令验证目录是否在已经在PATH中:

echo $PATH

4.运行并检测flutter

flutter doctor

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

[-] Android toolchain - develop for Android devices 
• Android SDK at /Users/obiwan/Library/Android/sdk 
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ 
• Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions.

一般的错误会是xcode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等，请按照提示解决。下面贴一个笔者本机(mac)的环境变量配置，您可以对比修正：

export PATH=/Users/用户名/Documents/flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/用户名/Documents/android_sdk" //android sdk目录，替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=[https://storage.flutter-io.cn](https://storage.flutter-io.cn/)

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

一旦你安装了任何缺失的依赖，再次运行flutter doctor命令来验证你是否已经正确地设置了。

4.配置编辑器

4.1下载xcode（flutter中主要xcode主要用来build，开发代码不在xcode中编辑），作为ios开发这是必备，此处省略

4.2下载IDE，用来编辑dart代码，debug等，在flutter中扮演重要角色，

推荐VS Code（轻量级编辑器，支持Flutter运行和调试）或者Android Studio ，IntelliJ IDEA

4.3 给VC Code安装flutter插件

1.启动 VS Code

2.调用 View>Command Palette…

3.输入 ‘install’, 然后选择 Extensions: Install Extension action

4.在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

5.选择 ‘OK’ 重新启动 VS Code

通过Flutter Doctor验证您的设置

1调用 View>Command Palette…

2.输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action

3.查看“OUTPUT”窗口中的输出是否有问题

至此，我们的flutter的环境配置就全部完成了。

二.创建flutter项目

创建方式有2种：VSCode创建，终端命令行创建

2.1.使用VSCode创建flutter项目

1.启动 VS Code

2.调用 View>Command Palette…

3.输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action

4.输入 Project 名称 (如myapp), 然后按回车键

5.指定放置项目的位置，然后按蓝色的确定按钮

6.等待项目创建继续，并显示main.dart文件

2.2.使用命令行创建

$ flutter create myapp $ cd myapp

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单的演示应用程序。

在项目目录中，您的应用程序的代码位于 lib/main.dart.

三.运行flutter程序

3.1 使用命令行运行

没有定位到你新建工程的根目录下的需要先定位到工程根目录

（这里需要至少打开一个模拟器或者连接一个有证书信任的真机再运行）

flutter run

这里需要注意的是：当你的mac打开了多个模拟器和连接的真机总数超过2个的时候，会报错:

More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

**的 iPhone • d3c6902e4742d3bb8e1e9bd89bdf79712348e190 • ios • iOS 12.3.1

iPhone 8 • 0FC2177E-59C6-4640-984B-A6799A3F21F5 • ios • iOS 12.1 (simulator)

这时候我们需要选择指定哪个设备去run：

flutter run -d 0FC2177E-59C6-4640-984B-A6799A3F21F5（这里我们指定模拟器iphone 8）

或者

flutter run -d all (运行所有已经打开的设备)

3.2使用VSCode运行

1.确保在VS Code的右下角选择了目标设备

2.按 fn+F5 键或调用Debug>Start Debugging

这里说个注意点：当你的工程不是通过VSCode创建的时候，你如果想通过vs run,可能你不知道flutter工程下哪个文件是vs打开的入口，（具体我也不知道，囧😳）这时候我们需要用不上打开整个flutter工程的文件夹，

file-->open-->选择你工程的文件夹

打开工程之后，如果你直接按照前面的方法run，会弹如下框：

image1.png

因为vs不知道这段个工程是属于什么环境，需要你选择一个环境，咱们选择第一个“Dart & Flutter”，然后等待十秒钟左右就起来了。

可能还有同学想问，vs 想debug 的时候除了用按 fn+F5 键或调用Debug>Start Debugging外有没有可视化的按钮？

答案是有的，如图：

image2.png

四.体验热重载

Flutter 可以通过热重载（hot reload）实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语:如果是一个web开发者，那么可以认为这和webpack的热重载是一样的）。简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。

用你喜欢的编辑器打开文件lib/main.dart
将字符串

'You have pushed the button this many times:' 更改为

'You have clicked the button this many times:'

不要按“停止”按钮; 让您的应用继续运行.
要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击热重载按钮 (绿色圆形箭头按钮).

你会立即在运行的应用程序中看到更新的字符串

这里需要注意的是：使用热重载功能能立马看到你更改之后的效果，但是你更改之后的代码并没有被编译到app中，意思就是，如果你更改代码，用热重载之后，你关掉应用，下次你通过模拟器或者真机手动点击打开应用的时候，你会发现你改的代码并没有生效，也就是你改的代码需要重新编译一遍才能生效，不过你下次再通过vs或者命令行run的时候，就会变编译进去了。

本人也处于学习阶段，以上属于自己针对官方文档做的一些个人总结，有不对之处欢迎指正。
学习链接：
Flutter中文网：https://flutterchina.club
Flutter社区中文资源：https://flutter-io.cn/#section-keynotes
Flutter视频学习：https://classroom.udacity.com/courses/ud905