用 Flutter 实现画板

本文作者为 360 奇舞团前端开发工程师

一、前期准备

可以按照flutter 官网搭建下相应的环境，这里大概讲解下用 fvm 搭建 flutter 环境。

MacOS 使⽤ fvm 管理多个 flutter 版本

1. 安装fvm

   # 使用 brew 安装
   brew tap leoafarias/fvm
   brew install fvm
   # 使用 pub package 安装
   dart pub global activate fvm

   安装成功后命令行里会给出 fvm 目前安装路径 $PATH":"$HOME/.pub-cache/bin"

2. 配置

   # .bash_profile 中添加
   export PATH = "$PATH":"$HOME/.pub-cache/bin"
   # 使.bash_profile 生效
   source .bash_profile
   # 执行 fvm 命令，看是否出现相关 help

3. fvm 相关命令

• 配置 fvm 缓存路径fvm config --cache-path <CACHE_PATH>

• 查看当前安装的版本fvm list

• 安装指定版本的 flutterfvm install version

• 删除指定版本的 flutterfvm remove version

• 指定当前使用哪个版本fvm use version

ps:切换 flutter 版本后需要敲下 fvm flutter doctor。因为每个版本不一样，所以可能需要重新下载运行环境

安装独立的 dart 环境

1. 安装

brew tap dart-lang/dart
 brew install dart

1. 更新

brew upgrade dart

1. 重新安装

brew reinstall dart

创建初始项目

fvm flutter create flutter_painter
cd flutter_painter
fvm flutter run

输入fvm flutter run后控制台会提示想选择用哪种设备进行调试，也可以使用flutte