Mac电脑搭建Flutter ios环境以及让Flutter运行在ios设备上

Flutter入门实践成功!
现整理笔记,欢迎尝试使用[呲牙]

零、扫盲
一、 准备工作
二、 下载 Flutter、配置 Flutter 环境变量、配置 Flutter 镜像
三、 运行 flutter doctor 命令检测环境
四、 配置 Flutter Ios 环境
五、 命令行工具生成 Flutter 项目
六、 修改 Flutter Sdk 目录的权限以及项目的权限.
七、 Xcode 打开 flutter 项目 模拟器运行项目
八、 在 Vscode 中配置 开发 Flutter 项目

零、扫盲

Flutter是谷歌公司基于Dart语言开发的一款开源、免费的移动UI框架,可以让我们快速的在Android和Ios上构建高质量App,它最大的特点就是跨平台、以及高性能。它针对的开发者是全部开发者,它的性能相比RN、Ionic这样的框架要好一些。

Flutter 基于谷歌的 Dart 语言,如果没有任何 Dart 语言的基础,不建议直接学习 Flutter。建议先学习 Dart 语言的基本语法。然后再进入 Flutter 的学习。

一、准备工作

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

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

1、下载 Flutter SDK

2、安装Flutter Sdk 的目录

把下载好的 Flutter SDK 随便解压到你想安装 Sdk 的目录,这里我安装的是:/Users/zhangli/Documents/Flutter_mac/flutter

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

在终端输入以下命令进行编辑文件

vim ~/.bash_profile

查看是否有以下配置环境变量,没有的话按键盘字母i进行编辑。

// 路径要使用你上面放置Sdk的目录路径
export PATH=/Users/zhangli/Documents/Flutter_mac/flutter/bin:$PATH

路径是根据你放置下载文件的路径来写的,所以自己要清楚路径才行。如果不能使用梯子的还需要在环境变量里配置一下Pub源,不然无法使用,可以直接接着下面增加两行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

编辑完成后,按esc,接着输入:wq进行保存文件退出。

查看编辑成功后,可按esc,接着输入:q直接退出。

或者使用该命令打开直接修改编辑。

open ~/.bash_profile

输入以下命令使其配置环境变量更新成功

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 环境

我这里之前学习Dart基础语言时,已经安装过brew,如果我们已经安装过brew的话,运行: flutter doctor 如果出来下图表示 ios 的环境配置完成
[图片上传失败...(image-8d37d0-1584612652365)]

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

https://brew.sh/

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、分别执行下面命令

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
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 ios-deploy cocoapods

pod setup

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

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

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

sudo flutter create flutterdemo

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

// 777表示设置可读可写可执行 *代表所以文件
sudo chmod -R 777 *
sudo chmod -R 777 flutter_app01

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

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

运行flutter run时,如若提醒未支持设备连接,要手动连接手机,或者打开Xcode里的模拟器就解决了。
此时再输入flutter doctor命令时,则会显示你所连接设备成功[✓] Connected device
如下图所示:

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

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


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

选择文件File-->Open··选择你的项目


3、运行 Flutter 项目

flutter run

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容