专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

Flutter开发环境搭建

安装Dart
brew tap dart-lang/dart
brew install dart
# ~/.zshrc 或 ~/.bashrc 新增1行:
export PATH="$HOME/.pub-cache/bin:$PATH" # pub
安装fvm (同时安装多个flutter版本)
pub global activate fvm
fvm install stable # 或指定比如: 1.10.7, [Versions](http://url.cn/52OcNkr)
# ~/.zshrc 或 ~/.bashrc 新增1行:
export PATH="$HOME/fvm/versions/stable/bin:$PATH" # fullter
# fvm list # 已安装的版本号
flutter version manager

fvm或者flutter channel切换版本都不太好用(一个是需要以fvm开始命令, 一个是不能按项目切换版本),
推荐使用 direnv 设定:

brew install direnv
# 项目目录内执行 (指定了version为stable):
direnv allow;
echo 'VERSION="stable"; export PATH="$HOME/fvm/versions/$VERSION/bin:$PATH"' > .envrc;
信息打印
flutter --version
flutter doctor -v # 检查环境配置
# 安装依赖, 比如 XCode, Android Studio
brew install cocoapods
编辑器设定:
  • VSCode

    • Extensions安装: Flutter, Dart
    • 如果 VSCode 提示: Could not find a flutter SDK: 重启下VSCode
  • Android Studio

    • Android Studio(启动并完成设置向导, Configure/Plugins安装: Flutter, Dart)
    • shell执行: flutter doctor --android-licenses
    • Perferences:

      • Flutter Sdk path: <user>/fvm/versions/stable
      • Dart Sdk path: <user>/fvm/versions/stable/bin/cache/dart-sdk
模拟器
  • Android模拟器, Android Studio配置:

    • Configure/Tools - AVD Manager, Create Virtual Device, 选择一个设备, Next.
    • 其他版本Android: Preferences - Appearance & Behavior - System Settings - Android SDK, 勾选版本(比如: Android 8.0)安装.
  • IOS模拟器, Xcode配置:

    • Open Developer Tool - Simulator, Hardware - Device, 选择iOS和iPhone型号.
    • 其他版本iOS: Perferences - Components, Simulator 选择一个iOS版本下载.
flutter emulators # 列出模拟器
# flutter emulators --launch apple_ios_simulator # 启动模拟器

环境搭建完毕, 推荐用VSCore开发.

FAQs

  • 模拟器: 粘贴复制文本

    • Android: 长按输入框, 出现菜单.
    • iOS: 直接command+v粘贴 (如无效: 尝试关闭再开启: 菜单: Edit > Automatically sync pasteboard).
  • 模拟器: 关闭app

    • iOS: shift+command+H2次, 列出打开的app列表, 上滑app.
    • Android: command+O, 列出打开的app列表, 上滑app.
  • 模拟器: 截图 (图片自动保存在Mac的桌面)

    • iOS: Simulator - File - New Screen Shot (command+S)
    • Android: 浮动工具栏 - 相机图标 (command+S)
  • 模拟器: 录屏

    • iOS: shell执行 xcrun simctl io booted recordVideo ./v.mp4 开始录屏(当前目录生成文件).
    • Android: 浮动工具栏 - 更多(三个点按钮) - Record and Playback(摄像机图标), 进入录屏(可保存WEBM/gif格式).
    • 视频转gif: 系统装了ffmpeg, 可以用命令转 ffmpeg -i input.mp4 out.gif; 或者用在线视频转gif.
  • 模拟器: 修改hosts

    • iOS: 使用Mac的的/etc/hosts文件
    • Android:

      cd ~/Library/Android/sdk/platform-tools # Android Studio, Android Sdk里可以看到路径
      # 如果发现remount无效, 可以这样启动模拟器:
      # ./adb -e emu kill # 关闭模拟器
      # ~/Library/Android/sdk/emulator/emulator -list-avds # 模拟器列表
      # ~/Library/Android/sdk/emulator/emulator -writable-system -avd Pixel_3_API_26 # 可写方式启动
      ./adb root; ./adb remount; # 让 /system 可写
      ./adb shell "echo 10.2.112.73 test.lvh.me > /system/etc/hosts"
      ./adb shell "cat /system/etc/hosts" # 验证hosts
  • 模拟器: 安装自签名ssl证书 (否则hosts绑定的域名用https打不开)

    • iOS: 拖放 ca.crt 文件到模拟器, 然后 Settings > General > Profiles(找到CA安装), General > About > Certificate Trust Settings(启用安装的CA).
    • Android: 拖放 ca.der.crt 文件到模拟器, Settings > Security > Install from SD card, 选Downloads(或Internal storage/Download)目录的crt, 提示设置屏幕锁定(选PIN, 输入四位密码下一步), 输入证书名: rootca, 用途: VPN and apps. 安装后, 可以在 Settings > Security > Trusted credentials > USER 里面看到.
    • 生成ssl证书参考
    • 如提示ssl证书无效, 可尝试重启浏览器.

/ 分类: 开发 / TrackBackhttps://xhl.me/archives/838/trackback标签: flutter

添加新评论 »