flutter 开发环境配置 mac + item2 配置flutter

﹏ヽ暗。殇╰゛Y 2023-07-05 13:22 18阅读 0赞

# mac + item2 配置flutter #

## 简介 ##

flutter是谷歌基于dart 推出的一款开源的开发移动应用的框架，性能比起native 也不遑多让。用起来也很有自己的特色。但开发flutter 需要在本地配置一些环境变量和下载sdk。在配置的过程中即便按照文档来也是有诸多小坑，所以这篇文章记录下再用 mac item2配置 flutter的时踩过的一些坑。

## 准备 ##

1.  Xcode用于开发ios的模拟器，以及打包ios应用，可在 app store 上下载最新版(如果开发安卓就需要 andrioid studio)
2.  hoembrew： mac上非常好用的一个包管理工具详情见: [https://brew.sh/][https_brew.sh]  
    或者直接打开终端运行
    
        /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
3.  vscode：写代码的编译器，并下载 flutter 和 awesome flutter snippers 增加开发幸福指数。  
    4. Flutter SDK 下载这个sdk，国外的速度由于众所周知的原因速度很慢，建议在github上下载：\[https://github.com/flutter/flutter/releases\]
4.  上述是中文文档中的步骤，不过会出现 "遇到坑"中的第一个问题，原因是这么做下载的zip包中少了git 信息，所以建议直接cd到希望存储的文件夹，然后直接使用git clone 的方式直接下载master分支上的代码即可。即：
    
        git clone -b stable https://github.com/flutter/flutter.git
    
    这样就可规避下面所提到的第一个坑
5.  配置环境变量, 因为现在大部分开发者用的都是 item2，所以环境变量的配置在 根目录下的 .zshrc, 可以使用vim 编辑，也可以直接打开文本编辑都一样即
    
        open ~/.zshrc
    
    打开之后在文末追加如下配置
    
        export PATH=/${sdkPath}/bin:$PATH
        export PUB_HOSTED_URL=https://pub.flutter-io.cn
        export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
    其中  s d k P a t h 是 你 再 第 四 步 下 载 好 s d k 之 后 解 压 到 m a c 上 的 某 文 件 夹 下 的 绝 对 路 径 比 如 我 自 己 是 的 在 如 下 如 路 径 ， 那 就 将 下 面 的 路 径 替 换 \{sdkPath\}是你再第四步下载好sdk之后解压到mac上的某文件夹下的绝对路径 比如我自己是的在如下如路径，那就将下面的路径替换 sdkPath是你再第四步下载好sdk之后解压到mac上的某文件夹下的绝对路径比如我自己是的在如下如路径，那就将下面的路径替换\{sdkPath\}即可  
    这里说下如何获取当前路径的两种方式，
    
    1.  一种是打开终端，直接把文件夹拖进来即可显示当前文件夹在mac上的绝对路径。
    2.  另一种是在终端已近进来了那就直接敲一下 pwd 这个命令也可查看当前路径  
        如下图：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]  
        如果不是使用item2的同学那可以直接配置在 .bash\_profile 文件中。  
        顺别说下，配置好之后需要重新开起下item2的终端，如果是配置的 .bash\_profile的话那就
        
            source ~/.bash_profile
        
        上述命令 运行一下。以便新配置生效

## 遇到的坑 ##

文档之所以是文档，就是你会神奇的发现，自己明明是按照文档一步步来的，可总会遇到一些莫名其妙的问题，而这些问题大部分文档是没有说明的，下面罗列了一下我在配置过程中是遇到哪些问题，以及是如何解决的

## 检测flutter sdk ##

sdk下载并解压好了，环境变量也配置了, 这时候再终端中跑一下  
`flutter doctor`  
检测一下结果发现报了如下错误:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]  
解决方式是 cd 到 刚刚解压flutter sdk 文件夹下我是把刚刚解压的文件都删除了，然后重新clone一下flutter sdk 的地址。这样本地多了个 .git的文件夹，包含了git 信息，就不会报这个错误。或者在上述第四步中直接使用 git 的方式也可以规避这个问题

处理完这个问题之后再 运行一下 flutter doctor 检测一下，如果发现还需要有什么依赖的包会去下载如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 2]  
所需依赖下载完之后会出现如下界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 3]  
因为这里我只下载了 ios开发所需要的 Xcode，安卓的没有配置，所以报了一些安卓有关的错误，如果有需要可以下载 android studio 并配置一下，这里就以 ios Xcode举例了  
如果都配置好了没问题可以运行下 flutter help 如果出现一些命令提示就说明 flutter sdk是配置好了，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 4]

## 配置 flutter ios 的环境 ##

如果希望flutter应用可以在 ios真机上运行，那就需要一些额外的工具，和一个apple的账户，依次执行下面的这些命令

brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup

如果这些命令中的任何一个失败并出现错误，请运行brew doctor并按照说明解决问题.

如果只是在开发阶段不需要连接真机的话，也可以先跳过这个步骤，可以直接使用 Xcode上的模拟器来开发

open -a Simulator

上述命令可以直接打开Xcode上的模拟器

## 使用脚手架创建第一个 flutter 应用 ##

使用 flutter create 脚手架命令来创建第一个 应用，如下

sudo flutter create flutter_glaxy

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 5]  
这个时候先不要 flutter run 不然的话 会报权限错误，如下图，因为在启动的时候会在该应用下 读写一些文件，需要相应的权限  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 6]  
解决的办法是给刚刚创建好的 flutter 文件夹赋予权限，同时也最好给上述第四步 flutter sdk 所在的文件夹 赋予相应的权限  
主要是这一条命令

sudo chmod -R 777 *

sudo 是使用管理员权限， chmod 是关键字、 -R 表递归文件 、\*表匹配所有文件/文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 7]  
解决这个权限问题之后打开应用根目录下的ios/Runner.xcodeproj 文件，会自动调用Xcode打开这个flutter这个时候先选好模拟器然后 build 一下 整个工程,  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 8]  
build success 之后会 自动用所选的模拟器打开flutter 项目，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 9]  
当然这里我是对文件做了一些修改。

## 切换 vscode 开发应用 ##

使用Xcode build 完之后可以使用vscode 打开我们的项目代码，这时候注意一下在 vscode 的右下角 有没有一个 ios 模拟器的名称，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 10]  
如果有的话可以就表示模拟器和当期的vscode 连接到一起了，那我们就可以关掉Xcode直接在vscode中使用 flutter run 命令调用模拟器运行我们的代码了。  
如果在开发过程中需要热更新的话可以在终端出输入R 这个页面就可以被 reload 了。

至此一个 flutter 的应用算是运行起来了。如果按照官方文档中来的话确实是会遇到一些莫名的“坑”。也期待 flutter 社区会越来越强大，越来越好。

## 参考文档 ##

dart 中文网： [https://www.dartcn.com/][https_www.dartcn.com]  
flutter中文网： [https://flutterchina.club/][https_flutterchina.club]  
工具包地址（类似npm）： [https://pub.flutter-io.cn/packages?q=][https_pub.flutter-io.cn_packages_q]

[https_brew.sh]: https://brew.sh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200215134302344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200215135159408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200215140229558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200215140302233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200215141518878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200215141634413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200215141757468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200215141924385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200215142449663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/202002151426218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200215142949984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70
[https_www.dartcn.com]: https://www.dartcn.com/
[https_flutterchina.club]: https://flutterchina.club/
[https_pub.flutter-io.cn_packages_q]: https://pub.flutter-io.cn/packages?q=