本文是个人学习 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,路径即为上面Flutter SDK 安装目录,一定要正确。
#这是我之前添加的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
关于zsh的配置
若终端为zsh,启动终端时,默认不会加载$HOME/.bash_profile
,有如下两种方式处理,任选其一即可。
1、 可以在$HOME/.zshrc
文件中添加source ~/.bash_profile
指令,然后保存.zshrc并退出,刷新当前窗口source ~/.zshrc
2、 直接将上述关于flutter的配置,添加到$HOME/.zshrc
文件,然后保存并退出,刷新当前窗口source ~/.zshrc
查看设置结果:
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 (调试控制台)查看启动进度。