Flutter环境配置

2021-10-25  本文已影响0人  喝酸奶舔下盖

一、简介

Flutter是Google在2015年推出的移动UI框架，可快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。
Flutter第一次亮相于2015年5月Dart开发者峰会上，初始名字叫做“Sky”，后更名为Flutter，Flutter使用Dart语言开发，Dart是Google于2011年推出的新的计算机编程语言。
其应用广泛，社区活跃，因为可以跨平台试用，开发效率还是可以的。学起来学起来！！！

二、Flutter特点

Flutter特点
快速开发 由于Flutter选用了Dart作为其开发语言，Dart既可以是AOT（Ahead Of Time）编译，也可以是JIT（Just In Time）编译，其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。
性能有约、不依赖原生 使用自带的高性能渲染引擎（Skia）进行自绘，渲染速度和用户体验堪比原生。
界面更新逻辑和原生不同，采用增量渲染 修改控件属性时，重新穿件一个新的Widget
富有表现力的精美UI Flutter内置众多精美的Material Design（组件的实现是同名的谷歌设计语言）和Cupertino（iOS风格）小部件，开发者可快速构建精美的用户界面，以提供更好的用户体验。
跨平台 Windows、macOS、Chrome OS、Linux （iOS、Android、web）

三、环境搭建（For Mac）

3.1 下载Flutter SDK

最新安装包地址

3.2 解压SDK包

下载完成后，那么接下来就是安装路径了。
因为Flutter的SDK中包含了很多命令⾏⼯具。我们需要配置环境变量，所以建议你安装到你平时放命令⾏⼯具 程序的地⽅!

cd /Users/wangxuewen/Documents/flutter
unzip ~/Downloads/flutter_macos_v2.5.2+hotfix.4-stable.zip

3.3 配置 Flutter 的 PATH 环境变量

 export PATH="$PATH:`pwd`/flutter/bin"
# 验证 flutter 是否可用
flutter

3.4 环境检测

# 查看当前环境是否需要安装其他的依赖
flutter doctor

打钩的就是配置OK了，叹号表示警告（下图提示更新cocoaPods，不影响使用），叉就是没有配置好。


3.5 更新 PATH 环境变量（全局配置）

出现： flutter: command not found 问题
原因：设置环境变量的时候，直接在命令行通过 export 命令进行的，并没有全局设置，需要做如下修改。

# 将flutter/bin添加到.bash_profile或.zshrc文件中
export PATH="$PATH:[替换为FlutterSDK保存的路径]/flutter/bin"

# 修改.bash_profile文件，并更新环境变量 (适用于： Linux、macOS Mojave 之前的系统)
open -e $HOME/.bash_profile
source $HOME/.bash_profile

# 修改.zshrc文件，并更新环境变量 (适用于：macOS Catalina)
open -e $HOME/.zshrc
source $HOME/.zshrc

四、平台配置

macOS 可以开发 iOS、Android 和 Web（技术预览版正式发布）三个平台的 Flutter 应用。

iOS开发环境

# 安装多个 Xcode，可以通过命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# 打开 Xcode，或者通过命令同意许可协议
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# 运行模拟器
open -a Simulator

Android开发环境

1. 安装Android Studio
2. 配置SDK

根据安装向导，我们需要安装Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools，安装过程无需翻墙。

我们也可以进入偏好设置 CMD + ， 如下图安装 image.png
3. 安装Android Studio的插件
4. 配置Android模拟器

根据以下步骤来将 Flutter 应用运行或测试于你的 Android 模拟器上：

Web开发环境

安装 Chrome

五、Flutter常用命令

通过flutter --help查看 Flutter 常用命令

常用命令:
  flutter create <output directory> 创建项目
  flutter run [options]             运行项目
  
使用: flutter <command> [arguments]

全局选项:
-h, --help                  打印帮助信息
-v, --verbose               动态日志

-d, --device-id             目标设备 ID 或名称
    --version               查看命令版本
    --suppress-analytics    禁止分析报告
    --bug-report            提交 bug

可用的命令:
  analyze          分析 dart 代码
  attach           附加应用到连接中的设备
  build            构建应用
  channel          列出或者切换通道
  clean            删除 build/ 文件夹
  config           配置 flutter
  create           创建项目
  devices          列出已连接的设备
  doctor           检查 flutter 信息
  drive            Runs Flutter Driver tests for the current project.
  emulators        列出可用的设备
  format           格式化 Dart 文件
  fuchsia_reload   热加载
  help             显示帮助信息
  install          在连接的设备中安装 app
  logs             显示正在运行的应用的日志
  packages         包
  precache         Populates the Flutter tool's cache of binary artifacts.
  run              运行应用
  screenshot       为应用截图
  stop             停止运行
  test             Run Flutter unit tests for the current project.
  trace            Start and stop tracing for a running Flutter app.
  upgrade          更新 flutter

常见错误

error 1

Could not build the application for the simulator. Error launching application on iPhone 11

造成该问题是因为升级cocoapods到最新版，按照网上的很多方案都未解决，flutter clean、清理xcode缓存、清理flutter缓存文件...
后面在 github flutter issues 上看到该问题的解决方案: 切换flutter分支到master

flutter channel master

执行 flutter channel查看当前flutter所处分支（我的flutter处于stable(稳定)分支），
然后在官网上看到这一句话：

我们强烈建议跟踪Flutter的stable分支，这是Flutter稳定分支。 如果你需要查看最新的变化，你可以跟踪master分支，但注意这是开发分支，所以稳定性要低得多。

要切换分支，请使用flutter channel stable 或 flutter channel master
还有个奇怪的问题，我这边先切换到master然后再切回stable分支，fluttter clean后flutter run运行正常。不确定是不是切换flutter分支时flutter会检查其环境配置，把一些丢失的文件重新下载配置好。

上一篇下一篇

猜你喜欢

热点阅读