上周任务不多, 闲来无事想学习一下 flutter 耍一耍, 发现 flutter 的环境搭建步骤还是很繁琐的, 官网的搭建教程只是按步骤让你进行操作, 中间出现的问题完全没有提及, 对我这种没搞过原生开发的小白来说超级不友好. 而网上很多相关博客教程, 感觉不够详细, 许多环境搭建过程中的坑确实是提到了, 但解决的办法写的比较笼统, 在此我将本次环境搭建锁遇到的各种奇奇怪怪的问题一一汇总, 争取结合各路大神的博客加上自己实际遇到的问题整理出一篇超级实用且详细的教程, 让童鞋们在学习 flutter 的路上少走弯路, 让你的起跑顺畅起来, 大神们请指正或忽略.
系统环境要求
Flutter 是相对新出的框架, 对系统有一定的要求.
操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括 Xcode 或 Android Studio 的磁盘空间, ps:Xcode 大概 6 个 G, 学习的情况下可以 2 选一)
软件 Xcode,Android studio,VsCode
工具: Flutter 依赖下面这些命令行工具:
bash, mkdir, rm, Git, curl, unzip, which
brew 是 Mac 下的一个包管理工具, 类似于 CentOS 下的 yum, 可以很方便地进行安装 / 卸载 / 更新各种软件包, 例如: Node.JS, Elasticsearch, kibana, MySQL, MongoDB 等等, 可以用来快速搭建各种本地环境, 程序员必备工具, 很多 Mac 都没有安装 brew, 但它在环境搭建中有着超级大的作用, 所以没有的童鞋先去安装 brew, 教程: 学习安装 brew https://segmentfault.com/a/1190000013317511
下载 Flutter SDK
两种方式: 官网下载和 GitHub 下载
flutter 官网下载地址点击进入 https://flutter.dev/docs/get-started/install/macos
在国内因为中所周知的原因, 要想正常获取安装包列表或下载安装包, 可能需要 FQ, 大家也可以去 Flutter GitHub 项目下去下载安装包, 转到下载页 https://github.com/flutter/flutter/releases
懒癌患者可以直接点击本链接下载, 随着版本的升级此链接可能会失效: 点击直接下载
将下载好的 sdk 保存后解压.
如果已经安装了解压软件可以直接解压
或者在命令行使用 unzip 进行解压
例如:
- cd ~/development
- unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
记住解压后的文件路径, 接下来要用到.
配置环境变量和镜像
由于在国内访问 Flutter 有时可能会受到限制, Flutter 官方为中国开发者搭建了临时镜像, 可以将如下环境变量加入到用户环境变量中.
如何更改环境变量?
使用快捷键 Command+R(或者 Windows 键 + R), 或者直接点击 Launchpad, 进入 Launchpad, 点击其他这个工具集合, 选择终端 (或者 terminal), 进入命令行工具.
输入: echo $PATH, 按回车执行命令查看当前变量值.
输入: sudo vi ~/.bash_profile, 按回车输入密码后用 vi 打开用户目录下的 bash_profile 文件. 一定要用 sudo, 否则没权限保存文件.
按 i 键, 在空白处开始编辑
将以下代码添加进去
Flutter 临时镜像
- export PUB_HOSTED_URL=https://pub.flutter-io.cn
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
更新 flutter 的 PATH 变量, 以便可以运行 flutter 命令在任何终端会话中.
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
注意!!!:PATH_TO_FLUTTER_GIT_DIRECTORY 为你解压过的 flutter 文件路径, 上一步提到过, 比如 "~/document/code", 千万别顺手全粘贴上去, 考试连姓名都抄的同学不是一个合格的学渣.
运行 source ~/.bash_profile 或重启命令行刷新当前终端窗口.
运行 echo $PATH 验证目录是否在已经在 PATH 中, 正确的输出如下, 每个电脑输出可能不一样, 但当你看到 flutter 路径出现即说明配置成功.
/mySpace/flutterSDK/flutter/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/MongoDB:/usr/local/go/bin~
检查开发环境
到此我们已经安装完 flutter 了, 但此时还不具备开发的能力, flutter 运行需要很多插件, 运行以下命令查看是否需要安装其它依赖项来完成安装:
flutter doctor
这时候它会将你未安装的依赖一一列出, 每个电脑缺少的依赖都不尽相同, 例如下面这样:
Android toolchain - develop for Android devices
• Android SDK at /Users/obiwan/Library/Android/sdk
Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
- visit https://flutter.dev/setup/#android-setup for detailed instructions.
- To install, run:
- 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.io/platform-plugins
- To install:
- brew install CocoaPods
- pod setup
先搞定需要 brew 安装的, 如果你英文好, 按着提示一条一条的安装, 如果英文不好的话, 那你可以找关键词, 比如上面的输出, 可以从中找到 brew install 字眼, 将所有需要 brew 安装的统统安装上即可. 还是以上面为例, 可以看到 brew 相关的有:
- brew install --HEAD libimobiledevice
- brew install ideviceinstaller
- brew install iOS-deploy
- brew install CocoaPods
执行上面命令逐条安装依赖. 再次运行 flutter doctor, 这个时候需要安装的一些插件错误已经不会报了, 但还是会有些其它的常见问题将会在下面一一列举出来.
常见问题汇总
CocoaPods is installed but not initializedCocoapods 已经安装但没有初始化, 执行下面语句完成初始化 (可能较慢, 耐心等待):
- pod setup
- Xcode installation is incomplete; a full installation is necessary for iOS development.
- Download at: https://developer.apple.com/xcode/download/
- Or install Xcode via the App Store.
- Once installed, run:
- sudo xcode-select --switch /Applications/Xcode.App/Contents/Developer
提示 xcode 安装不完整需要完整安装, 运行以下命令然后输入 root 密码便可:
sudo xcode-select --switch /Applications/Xcode.App/Contents/Developer
执行 brew install --HEAD libimobiledevice 命令会抛出如下异常:
- configure: error: Package requirements (libusbmuxd>= 1.1.0) were not met:
- Requested 'libusbmuxd>= 1.1.0' but version of libusbmuxd is 1.0.10
- Consider adjusting the PKG_CONFIG_PATH environment variable if you
- installed software in a non-standard prefix.
- Alternatively, you may set the environment variables libusbmuxd_CFLAGS
- and libusbmuxd_LIBS to avoid the need to call pkg-config.
- See the pkg-config man page for more details.
- READ THIS: https://docs.brew.sh/Troubleshooting
这时候需要运行 brew unlink usbmuxd & brew install --HEAD usbmuxd 而不是 libusbmuxd.
flutter doctor 没有检测到 Android SDK, 安装 sdk 即可, 如何安装?
先下载 Android sdk for Mac 给二个靠谱的网址:
a. http://down.tech.sina.com.cn/page/45703.html
b.
到这个面下载后, 解压到某个目录
设置下载的代理服务器
命令行进入 tools 目录
然后输入 ./Android sdk 请出 SDK Manager 的图形界面
Android SDK Manager -> Preferences...
http proxy server 这里填写: mirrors.neusoft.edu.cn (感谢东软搭建国内的镜像服务器, 为广大程序员造福无数)
端口填写 80, 然后把 Force https:// 前的勾勾上
Mac 顶部菜单 Tools->Manage Add-on Site
把下面这堆网址全手动 New 加进去, 然后就可以下载了 (注: 上图中加圈的项, 建议勾上, 否则有可能创建不了 Android 模拟设备):
- http://mirrors.neusoft.edu.cn/android/repository/addon-6.xml
- http://mirrors.neusoft.edu.cn/android/repository/addon.xml
- http://mirrors.neusoft.edu.cn/android/repository/extras/intel/addon.xml
- http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-tv/sys-img.xml
- http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-wear/sys-img.xml
- http://mirrors.neusoft.edu.cn/android/repository/sys-img/android/sys-img.xml
- http://mirrors.neusoft.edu.cn/android/repository/sys-img/google_apis/sys-img.xml
- http://mirrors.neusoft.edu.cn/android/repository/sys-img/x86/addon-x86.xml
- http://mirrors.neusoft.edu.cn/android/repository/addons_list-2.xml
- http://mirrors.neusoft.edu.cn/android/repository/repository-10.xml
平台设置
macOS 支持为 iOS 和 Android 开发 Flutter 应用程序. 现在完成两个平台设置步骤中的至少一个, 以便能够构建并运行你的第一个 Flutter 应用程序
iOS 设置 点击前往教程
Android 设置 点击前往教程
至此, 全部环境搭建步骤结束, 不敢保证全部正确, 但我尽可能的把我的安装过程和问题都列了出来, 希望可以帮到各位同学, 祝大家起跑顺利, 若果安装过程中有任何问题, 大家可以评论或在我的公众号前端小苑留言, 看到后我会第一时间回复.
最后欢迎大家关注公众号前端小苑, 我会定期在这里发表原创文章.
来源: https://www.cnblogs.com/Smiled/p/11043799.html