0
点赞
收藏
分享

微信扫一扫

Flutter macOS环境配置

其实通读一下文档后的感觉就是还蛮复杂的,起码比windows下配置要复杂一下,可能也是我平时windows用的比较多吧,今天这篇文章就以最简单直接的方式引导在​​macOS​​​上配置​​Flutter开发环境​


文章目录

  • ​​准备​​
  • ​​下载SDK​​
  • ​​先配置一下镜像​​
  • ​​下载sdk​​
  • ​​设置sdk路径​​
  • ​​解压sdk​​
  • ​​添加`flutter相关工具`到`path`中​​
  • ​​开始配置​​
  • ​​运行 flutter doctor 检测本机当前环境​​
  • ​​装插件​​
  • ​​新建项目​​
  • ​​运行项目​​
  • ​​更新环境变量​​
  • ​​ios配置:​​
  • ​​打开xcode​​
  • ​​Windows下配置Flutter开发环境​​



准备

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间)
  • 工具: Flutter 依赖下面这些命令行工具
  • ​bash​​​,​​mkdir​​​,​​rm​​​,​​git​​​,​​curl​​​,​​unzip​​​,​​which​


下载SDK

先配置一下镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

下载sdk

下载地址:​​https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos​​

Flutter macOS环境配置_Flutter macOS环境配置
选择最新的正式版本就行。

设置sdk路径

我在user目录下新建了一个FlutterSDK文件夹来存放:
Flutter macOS环境配置_Flutter macOS环境配置_02

解压sdk

执行命令:

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

就是进入存放sdk的目录,然后解压。

比如我的就是:
Flutter macOS环境配置_Flutter开发环境_03
解压之后,刚才设置的路径下就会多一个​​​flutter​​​的文件夹:
Flutter macOS环境配置_flutter_04

添加​​flutter相关工具​​​到​​path​​中

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

此代码只能暂时针对当前命令行窗口设置PATH环境变量,要想永久将Flutter添加到PATH中请参考下面​​更新环境变量​​部分。

这一步是为了可以使用flutter中的工具,比如检测环境配置等。



开始配置

运行 flutter doctor 检测本机当前环境

flutter doctor

Flutter macOS环境配置_Flutter环境配置_05
第一次执行可能会有点慢,后面就会快很多的。
Flutter macOS环境配置_Flutter开发环境_06
执行完会看到一堆报错,别慌,都好解决的。

直接从下面的​​Android Studio​​​开始看,提示​​flutter插件​​​和​​dart插件​​没安装,还有就是没有设备可以连接,先一步一步来。



装插件

打开Android Studio,安装flutter插件,也会提示安装dart插件,装就完事了,然后会提示重启。
Flutter macOS环境配置_Flutter macOS_07
Flutter macOS环境配置_Flutter环境配置_08
安装完并重启之后,再次执行​​​flutter doctor​​​来看看现在是什么效果。
Flutter macOS环境配置_Flutter环境配置_09
可以看到Android Studio 这一项已经没有报错了。

关于没有设备可以连接,完全不用担心,启个模拟器就行了。



新建项目

这个时候已经可以新建项目了:
Flutter macOS环境配置_flutter_10
可以看到新建项目的时候已经多了一个​​​new flutter project​​​的选项了。
Flutter macOS环境配置_Flutter macOS环境配置_11

​注意​​​:项目名称是小写加下划线的,然后选择你的​​sdk地址​​即可。



运行项目

新建项目之后会有一个默认的小demo模板,可以直接运行。

先选择一个模拟器,点击运行不会帮你自动启一个模拟器,要自己先手动启一个。
Flutter macOS环境配置_Flutter macOS_12
然后运行看看效果。

第一次运行初始化会有点慢,但是后面就快了,而且还有热重,如果不是特别大的项目,基本上不到1s就能看到效果了。

Flutter macOS环境配置_Flutter环境配置_13
可以看到一个默认的项目 。



然后我们来改一下title 和 加一个 hello flutter。

这一步主要是体验一下热重载

代码就不贴了,改好直接按​​command+s​​​就行。
Flutter macOS环境配置_flutter_14
可以看到是相当的快,不到1s,可以说是非常提升效率了。

看效果:
Flutter macOS环境配置_Flutter开发环境_15
可以看到标题改了,而且中间也多了一行红色的hello flutter。



更新环境变量

上面基本上都没有什么难度,但是到这里可能就会遇到坑了,比如我就遇到了。。

为什么会有这一步呢,是因为上面我们执行export PATH=​​pwd​​/flutter/bin:$PATH的时候,只是暂时把flutter相关工具加入到path中,这一步呢,就是永久的加入到path,以便可以运行flutter命令在任何终端会话中。

官方的3步骤:

  • 确定您Flutter SDK的目录,您将在步骤3中用到。
  • 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
  • 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH



第一步sdk路径是我们自己知道的,ok直接执行第二步:

$HOME/.bash_profile

ok,爬坑之路开始了,别慌,直接带你跳坑。

你可能会遇到:

Permission denied

Flutter macOS环境配置_Flutter环境配置_16

没有权限,然后搜解决办法,
按照操作执行,但是又提示 ​​​sudo: chmode: command not found​​, 一直找不到原因。



​注意了​​​,我们其实可以直接打开​​.bash_profile​​文件的(一般在Mac的当前用户目录下):

open .bash_profile

没有的话就创建:

touch .bash_profile

然后再打开。



打开是这样的:
Flutter macOS环境配置_Flutter开发环境_17

然后编辑,把镜像和flutter加进去:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

​PATH_TO_FLUTTER_GIT_DIRECTORY​​就是你flutter存放的路径。

比如我的就是这样的:
Flutter macOS环境配置_Flutter macOS环境配置_18保存。

然后执行刷新:

source $HOME/.bash_profile

然后来验证一下是否成功,输出path:

echo $PATH

Flutter macOS环境配置_flutter_19
可以看到第一个就是新增的flutter路径,到此更新环境变量就完成了。



ios配置:

上面是基于Android Studio进行配置的,现在看一下ios的配置。

我们重新执行以下 flutter doctor 看一下:
Flutter macOS环境配置_Flutter开发环境_20
这时候可以看到只剩下xcode和ios的报错了。

配置也可以,按照提示 安装cocoapods、libimobiledevice、ideviceinstaller等等就行。



实际上开发环境只有一个就行了,主要是xcode不识别dart文件,as中有flutter和dart插件,毕竟都是google的亲儿子,所以相对来说是​​最佳开发环境​​,但是还是可以运行到ios模拟器上看效果的。



打开xcode

终端执行:

$ open -a Simulator

打开一个ios模拟器。

然后as也能识别到并运行到ios模拟器中:
Flutter macOS环境配置_Flutter环境配置_21
然后运行到ios模拟器上看看效果:
Flutter macOS环境配置_Flutter macOS环境配置_22
ok,到此就全部配置结束了,可能篇幅较长,但是图文的形式更容易理解些。



写作不易,点个赞支持一下呗 ^ _ ^



Windows下配置Flutter开发环境




举报

相关推荐

0 条评论