Flutter Mac搭建

SunnyY
982 阅读3分钟

一、准备工作

  1. 升级 Macos 系统为最新系统
  2. 安装最新的 Xcode
  3. 电脑上面需要安装 brew https://brew.sh/

二、下载 Flutter、配置 Flutter 环境变量、配 置 Flutter 镜像

  1. 下载 Flutter SDK

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

  1. 把下载好的 Flutter SDK 随便减压到你想安装 Sdk 的目录如 /Users/aisheng/flutter_mac/flutte
  2. 把 Flutter 安装目录的 bin 目录配置到环境变量，然后把 Flutter 国内镜像也配置到环境 变量里面
vim ~/.bash_profile

export PATH=/Users/aishengwanwu/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

source ~/.bash_profile

flutter -h 如果能出来一些命令说明 flutter sdk 配置成功。

注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话，可能 sdk 没有配置成功，也可能 sdk 下载的时候没有下载全

三、运行 flutter doctor 命令检测环境

第一次运行 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: brew install ios-deploy
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods pod setup

四、 配置 Flutter Ios 环境

  1. 如果电脑上面没有安装 brew 的话首先第一步需要安装 brew

brew.sh/

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 分别执行下面命令
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

注意:如果运行命令失败请运行 brew doctor 并按照说明解决问题。 执行完成上面命令后然后重新运行: flutter doctor 如果出来下图表示 ios 的环境配置完成

四、命令行工具生成 Flutter 项目

sudo flutter create flutterdemo

五、修改 Flutter Sdk 目录的权限以及项目的 权限

sudo chmod -R 777 *

六、Xcode 打开 flutter 项目 模拟器运行项 目 注意:打开项目之前一定要修改权限

七、在 Vscode 中配置 开发 Flutter 项目

  1. Vscode 中安装 Flutter 插件 Dart 插件。
    • Flutter
    • Flutter Widget Snippets
    • Dart
    • Awesome Flutter Snippets
  2. Vscode 中打开 flutter 项目进行开发
  3. 运行 Flutter 项目
flutter run

r 键:点击后热加载，也就算是重新加载吧。
p 键:显示网格，这个可以很好的掌握布局情况，工作中很有用。 o 键:切换 android 和 ios 的预览模式。
q 键:退出调试预览模式。

权限被拒绝

在创建新的项目之后需要修改 Flutter Sdk 目录的权限以及项目的权限

miaomiao:flutter_demo mavis$ sudo flutter create flutterdemo
miaomiao:flutter_demo mavis$ sudo chmod -R 777 *

.vscode

问题：启动

一、在使用xcode运行时

ending crash report to Google.
Failed to send crash report due to a network error: SocketException: OS Error: Operation timed out, errno = 60, address = clients2.google.com, port = 57823
Oops; flutter has exited unexpectedly.
Crash report written to /Users/mavis/flutter_demo/flutter_app01/flutter_01.log;
please let us know at https://github.com/flutter/flutter/issues.
Failed to package /Users/mavis/flutter_demo/flutter_app01.

二、在执行完flutter run之后，Sending crash report to Google.而不是Sending crash report to Ios,报错。

Failed to send crash report due to a network error: SocketException: OS Error:
Operation timed out, errno = 60, address = clients2.google.com, port = 53898
Oops; flutter has exited unexpectedly.
Crash report written to /Users/mavis/flutter_demo/flutter_app01/flutter_04.log;
please let us know at https://github.com/flutter/flutter/issues.

一样的的错误。

解决：

用的是VSCode编辑器，如果直接命令flutter run,会报以上错误。

创建新的项目开启调试的步骤（不一定对，但是我是这的操作才能成功）

先通过VSCode运行应用程序：

  1. 确保在VS Code的右下角选择了目标设备
  2. 按 F5 键或调用Debug>Start Debugging （调试>启动调试）
  3. 等待应用程序启动
  4. 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

问题在于右下角是“没有设备”。

  1. 在终端中输入命令行flutter run
miaomiao:flutter_app02 mavis$ flutter run
 
Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...                                                  
                                                   
 ├─Assembling Flutter resources...                          23.8s
 └─Compiling, linking and signing...                        13.1s
Xcode build done.                                           41.7s
Syncing files to device iPhone 11 Pro Max...                            
16,228ms (!)

我要哭死了，原本可以运行的项目，现在运行不起来了，啊啊啊啊啊啊啊啊啊啊。。。。。

Mac OS下安装Gradle

brew install Android SDK

If the Android SDK has been installed to a custom location, set
      ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.
      
  如果Android SDK已安装到自定义位置，请设置
       ANDROID_HOME到该位置。
       您可能还需要将其添加到PATH环境变量中。

avatar
文章
阅读
粉丝