Flutter

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

2019-04-11  本文已影响163人  flowerflower
我想静静

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

目录
一、官网下载Flutter SDK
二、下载安装Android Studio
三、下载安装最新的Xcode
四、下载安装VS Code
五、初次体验 Flutter

一、 官网下载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:更改为哈哈哈哈,贼快。。

上一篇下一篇

猜你喜欢

热点阅读