Flutter Ios环境搭建

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 分享

详细视频教程b站免费学: https://www.bilibili.com/video/BV1S4411E7LY?p=19

Flutter+Getx仿小米商城项目实战视频教程-V3版地址https://www.itying.com/goods-1176.html

下面我们给大家看看Mac电脑上面如何搭建Flutter Ios环境

一、Mac电脑搭建Flutter Ios环境准备工作

1、升级Macos系统为最新系统

2、安装最新的Xcode

3、电脑上面需要安装brew https://brew.sh/

4、安装chrome浏览器(开发web用)

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

2.1、下载Flutter SDK

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

2.2、把下载好的Flutter SDK随便减压到你想安装Sdk的目录如

/Users/aisheng/flutter_mac/flutte

img

2.3、把 Flutter安装目录的bin目录配置到环境变量,然后把Flutter国内镜像也配置到环境变量里面

vim ~/.bash_profile
vim ~/.zshrc
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
source ~/.zshrc

flutter --version 如果能出来版本说明flutter sdk配置成功。

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

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

第一次运行 flutter doctor的时候会提示下面错误

img

相关错误代码如下:

    ✗ 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 Xcode Ios环境

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

https://brew.sh/

终端执行下面命令

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

img

img

img

6.4.2、分别执行下面命令

brew install cocoapods
pod setup

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

img

img

执行:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

img

注意:如果运行命令失败请运行 brew doctor并按照说明解决问题。

执行完成上面命令后然后重新运行:flutter doctor 如果出来下图表示ios的环境配置完成

img

五、Mac 上面创建Flutter ios项目

sudo flutter create flutterdemo

img

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

img

七、Xcode打开flutter项目 模拟器运行项目

img

**注意:**打开项目之前一定要修改权限

img

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

1、Vscode中安装Flutter插件 Dart插件

img

img

2、Vscode中打开flutter项目进行开发

3、运行Flutter项目

flutter run

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

详细视频教程b站免费学: https://www.bilibili.com/video/BV1S4411E7LY?p=19

回到顶部