本文是个人学习 Flutter 过程中的笔记，内容包含查阅的资料和自己实践的总结。
基本认识
Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。
Flutter的目标是使同一套代码同时运行在Android和iOS系统上，并且拥有媲美原生应用的性能，Flutter甚至提供了两套控件来适配Android和iOS（滚动效果、字体和控件图标等等），为了让App在细节处看起来更像原生应用。
Flutter开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。
Flutter同时支持Windows、Linux和macOS操作系统作为开发环境，并且在Android Studio和VS Code两个IDE上都提供了全功能的支持。Flutter所使用的Dart语言同时支持AOT和JIT运行方式，JIT模式下还有一个备受欢迎的开发利器“热刷新”（Hot Reload），即在Android Studio中编辑Dart代码后，只需要点击保存或者“Hot Reload”按钮，就可以立即更新到正在运行的设备上，不需要重新编译App，甚至不需要重启App，立即就可以看到更新后的样式。
以上内容摘自这里
系统要求
安装并运行Flutter，开发环境必须满足以下最低要求:
- 操作系统:：macOS (64-bit)
- 磁盘空间:：700 MB (不包括Xcode或Android Studio的磁盘空间）。
安装过程中，不足会提醒，腾出空间后可继续。 - 工具： Flutter 依赖下面这些命令行工具.
bash,mkdir,rm,git,curl,unzip,which
安装 Flutter
1、下载安装包
- 去 官网 下载 macOS 的 Flutter 的压缩包。(别在中文网下载，避免不是最新的）
2、解压缩安装包
解压缩 Flutter 到本地目录。比如，我在 /Users/xxx目录下，创建了一个development文件夹，存放 Flutter：
cd ~
#创建文件夹
mkdir development
cd development
#unzip ~/Downloads/<你刚刚下载的Flutter压缩文件>
unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip
3、设置PATH环境变量
3.1、临时添加到PATH（不建议）
添加 Flutter 工具到PATH，由于当前就在 /Users/xxx/development，直接用 pwd
#export PATH=<flutter sdk 存放路径>/flutter/bin:$PATH
export PATH=$PATH:`pwd`/flutter/bin
执行echo $PATH可以查看是否设置成功， 但是这种方式只能暂时针对当前命令行窗口设置PATH环境变量，关闭命令行窗口重新开启，echo $PATH查看，则没有之前的设置。所以不建议如此。
3.2 永久添加到PATH
- 打开/创建
$HOME/.bash_profile，由于我之前已经创建了该文件/Users/xxx/.bash_profile，故直接编辑：
vim ~/.bash_profile
- 添加Flutter到PATH。
#这是我之前添加的GO的PATH，和下面不冲突
export PATH=$PATH:$GOBIN
#Flutter_SDK_Path：Flutter SDK 安装目录，如上面的/Users/xxx/development
export PATH=$PATH:<Flutter_SDK_Path>/flutter/bin
- 使用镜像：
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像（不定期查阅避免失效），可以将如下环境变量也加入到用户环境变量中：
#国内用户需要设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 保存.bash_profile，并退出编辑模式，刷新当前窗口：
source ~/.bash_profile
- 查看设置结果：
echo $PATH
4、执行检查Flutter的安装
执行以下指令，检查Flutter是否需要安装其他依赖：
flutter doctor
如本人执行后，终端报错如下：
✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install with Brew:
brew install ios-deploy
根据以上提示，执行安装。安装过程中可能会空间不足，则清除空间后继续安装。最后再次执行flutter doctor检查：
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.5 17F77, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.0)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.30.1)
[✓] Connected device (1 available)
由于本人目前只考虑iOS的支持，故先忽略Android的支持。所以以上已经满足要求。
5、 其他
官方也提供了以下 clone 的方式来安装Flutter，本人并没具体实践：
#国内用户需要设置官方提供的镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#clone
git clone -b dev https://github.com/flutter/flutter.git
#设置环境变量
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
#检查flutter
flutter doctor
配置IDE
本人选择使用的是 VS Code。当然也可以配置其他编辑器，详见官网.
1、下载 VS Code
去 VS Code官网 下载安装最新稳定版本。
2、安装 Flutter 和 Dart 插件
- 启动 VS Code
- View > Command Palette，即 查看 > 命令面板
- 输入
install，选择 Extensions: Install Extensions，即 扩展：安装扩展 - 输入
flutter，在列表中选中 Flutter 进行安装（会同步安装 Dart 插件） - 安装完毕，点击 Reload to Activate，即 重新加载
3、检查
- View > Command Palette，即 查看 > 命令面板
- 输入
doctor，选择 Flutter: Run Flutter Doctor - 查看 OUTPUT 面板查看信息，若有报错根据提示解决即完成配置。
创建第一个 Flutter 项目
- 启动 VS Code
- View > Command Palette，即 查看 > 命令面板
- 输入
flutter，选择 Flutter: New Project - 输入项目名，点击回车确认
- 确认项目存放的路径
- 等待，当看到 lib/main.dart 文件，就表示创建成功。
运行 Flutter 项目
- VS Code 窗口底部状态条，选择真机或者模拟器。
- Debug > Start Debugging，或者直接点击 F5 。
- 等待程序启动，可在 Debug Console （调试控制台）查看启动进度。
网友评论