Flutter 安装 (Mac环境)—— 未入门,便差点放弃

我想静静

首先必须吐槽一番,Flutter环境也是真恶心。换了最新的系统(无奈之举),因为装Flutter需要下载最新版本的Xcode,而最新的Xcode需要系统是10.14.3或者以上版本才支持。为此统统换了个遍,心塞塞。

目录
一、官网下载Flutter SDK
二、下载安装Android Studio
三、下载安装最新的Xcode
四、下载安装VS Code
五、初次体验 Flutter
六、更新 Flutter与回退 【2021.12.11 更新】
七、更新回退遇到的问题 【2021.12.11 更新】

一、 官网下载Flutter SDK

下载最新即可,我下载的是v1.3.8版本的。注意这里是需要的翻墙的哟!!!

Flutter SDK.png

其次,解压安装包到你想安装的目录
例如:


flutter存放位置.png

紧接着终端执行

export PATH=`pwd`/flutter/bin:$PATH

运行 flutter doctor,查看是否需要安装其他依赖

flutter doctor
flutter doctor 检测环境执行结果如下
首次安装flutter

号外号外由图我们可以看到Flutter的版本是0.3.2的,系统版本是10.14.1的。由于Flutter版本过低导致后面出现了一个很是尴尬的问题,注意一定要在官网下载较新的SDK,否则后面出现一个比较尴的问题。后面会给出解释~稍等片刻!!!

doctor found issues in 4 categories().主要针对这4个问题进行对号入座。
第一个or 第三个:让我们安装Android Studio,并给出了安装地址,我们只需要根据地址下载安装即可,安装之后在执行flutter doctor第一个和第三个就显示☑️
第二个:让我们下载最新的Xcode,下载完之后执行某些命令
第四个:没有设备连接,这个忽悠不管


二、下载安装Android Studio点我


三、下载安装最新的Xcode

在AppStore下载或者更新到最新的Xcode即可,由于笔者的系统是10.14.1的,故将Android Studio,Xcode10.2下载完毕之后,并执行相关命令(brew install --HEAD libimobiledevicebrew install ideviceinstallerbrew install ios-deploy)之后,则更新系统

系统更新完成之后

进入终端执行

export PATH=`pwd`/flutter/bin:$PATH
flutter doctor

根据提示紧接着执行

sudo xcode-select --switch /Applications/Xcode.app/Contents/Deveoper

之后执行flutter doctor再次进行环境检测。与此同时,并已经下载安装VS Code(Visual Studio Code安装地址),但是注意前面显示的是[!]

紧接着按照提示再次执行,当执行到了brew install --HEAD libimobiledevice,出现了下面的问题。

解决Flutter环境问题:Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10

意思大致是说:系统要求的libusbmuxd版本和所要安装的版本不一致。

解决方式:

brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice

之后再次执行flutter doctor

图片.png

看到这里是不是很开心,以为就大功告成了。于是继续走起


四、下载安装VS Code

安装VS Code地址点我

安装Flutter插件

1、启动 VS Code
2、调用 View>Command Palette…
3、输入 install, 然后选择 Extensions: Install Extension
4、在搜索框输入 flutter, 在搜索结果列表中选择 Flutter, 然后点击 Install即可
5、重新启动 VS Code

通过Flutter Doctor验证您的设置

1、调用View>Command Palette…
2、输入 doctor, 然后选择 Flutter: Run Flutter Doctor
3、查看OUTPUT窗口中的输出是否有问题

此时你可以看到跟使用终端执行flutter doctor结果是一样的


五、初次体验 Flutter

*创建新的应用

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 flutter, 然后选择Flutter: New Project
  4. 输入 Project 名称 (如hello), 然后按回车键
  5. 指定放置项目的位置,然后按蓝色的确定按钮
  6. 等待项目创建继续,并显示main.dart文件
    *运行应用程序
    1.确保在VS Code的右下角选择了目标设备
    图片.png

注意:这里先将模拟器打开,否则就会出现


图片.png

F5 键或调用Debug>Start Debugging 等待应用程序启动

然后尴尬的事情就发生了 —— 清理失败


图片.png
Launching lib/main.dart on iPhone 6s in debug mode...
Skipping compilation. Fingerprint match.
Xcode failed to clean
** CLEAN FAILED **
Error launching application on iPhone 6s.
Exited (sigterm)

然后就各种瞎忙活,瞎折腾。直接进入,你会发现不管是真机还是模拟器都是可以跑起来的,但是为啥使用VS Code不管是手机还是真机咋就跑不起来呢 ???

于是各种百度找资料,你会发现依然解决不了你的问题

答案揭晓

揭晓前面留下了的隐患,就是因为Flutter SDK版本导致的,因为之前直接百度在人家写的文章里面下载的SDK,结果就这样被坑了,😞😞😞😞 ,也不知道是在哪篇文章连接里面下载的v0.3.2版本,被坑大发了。。。。
最终跑到 官网下载 ,下载最新即可,解压之后直接将之前的flutter替换即可。

大功告成,安装完毕

打开之前的建hello项目,直接Debug>Start Debugging运行即可。注意需要提前将模拟器打开。

图片.png

体验热重载

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。
1.打开文件lib/main.dart
2.将字符串You have pushed the button this many times:更改为哈哈哈哈,贼快。。

六、更新 Flutter与回退 【2021.12.11 更新】

1、flutter版本升级
2、flutter回退到指定版本

1、GitHub搜索flutter 点击进入后,选择tags


image.png

2、可以看到flutter SDK 的各个版本

image.png

3、cd进入到存放flutter sdk目录

eg:


image.png
git reset --hard ffb2ece

4、 最后再执行

flutter --version

七、更新回退遇到的问题 【2021.12.11 更新】

image.png

解决cmdline-tools component is missing

1、进入Android Studio添加SDK Tool对应所缺工具。可以去Android Studio找到Preferences -> Android SDK 找到SDK Tool
2、勾选Android SDK Command-line Tools(latest)点击一路OK下载完毕即可。
3、再次在终端Terminal或者iTerm输入flutter doctor进行检查。

image.png

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

推荐阅读更多精彩内容