macOS上搭建Flutter开发环境详细介绍

一、系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间)

二、准备工作,下载

Android Studio下载地址 https://developer.android.google.cn/studio/

google chrome 浏览器  浏览器电脑版下载,浏览器中文版下载

三、获取Flutter SDK

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
推荐下载Stable channel, 即稳定版

1.解压安装到你想存放的目录(这里以MacFlutter文件夹为例) 把下载的flutter文件夹存放到MacFlutter

2. 配置环境变量 

把 Flutter和Dart安装目录的 bin 目录配置到环境变量,然后把 Flutter国内镜像也配置到环境变量里面

新建一个文件

vim ~/.bash_profile

添加以下内容

# >>> flutter init >>>
export PATH=~/MacFlutter/flutter/bin:$PATH
export FLUTTER_ROOT=~/MacFlutter/flutter

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# >>> flutter init >>>

# >>> dart init >>>
export DART_HOME=~/MacFlutter/flutter/bin/cache/dart-sdk/bin
export PATH="${DART_HOME}:${PATH}"
# >>> dart init >>>

 注: ~/MacFlutter/flutter是flutterSDK的存放路径

使内容生效

source ~/.bash_profile

3.添加flutter相关工具到path中:

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

4.运行 flutter doctor 

运行以下命令查看是否需要安装其它依赖项来完成安装:

flutter doctor

 5.该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)

错误一:comline-tools component is missing

如图第一个错误原因(Android缺少东西)

解决办法

打开Android studio 选择Preferences

选中Android SDK 按图中把包含Tools的都选中,点击Apply 

 等待安装完成点击Finish

回到终端重新运行

flutter doctor

 错误二:chrome - develop for the web(cannot find chrome executable at...)

       

错误原因找不到 Goole chrome浏览器,下载一个安装就好

错误三:HTTP Host Availability HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host: Operation timed out

 

解决方法

找到flutter sdk的文件目录,打开flutter\packages\flutter_tools\lib\src\http_host_validator.dart

 将https://maven.google.com/修改为https://dl.google.com/dl/android/maven2/

去到flutter sdk的文件目录, 找到bin目录,删除cache文件夹

 关闭终端,重新打开终端

在终端重新运行flutter doctor

 问题解决。

错误四:! Some Android licenses not accepted.  To resolve this, run: flutter doctor       --android-licenses

 解决办法

1、运行flutter doctor --android-licenses命令
2、一直输入Y就可以了

运行flutter doctor后无错误,完成

 

 

 


文章标签:

原文连接:https://blog.csdn.net/sunjinjin1/article/details/123427587

相关推荐

看完这篇,你也可以搞定有趣的动态曲线绘制

Flutter 绘制探索 | 箭头端点的设计

极简的成本实现Flutter静态资源多渠道定制

Flutter 小技巧之优化使用的 BuildContext

Flutter ConstraintLayout(约束布局)完全指南

Flutter 2 商城App实战指南(支持Null safety)

利用Flutter开发了一个类似微信可运行小程序的App

为什么说 Compose 的声明式代码最简洁 ?Compose\u002FReact\u002FFlutter\u002FSwiftUI 语法对比

[Flutter] 认识Zone和异常处理

GetX状态管理的实现机制原理剖析

你真的敢落地Flutter桌面端吗?

Dart基本语法

Flutter Cupertino 教程:如何构建外观和感觉原生的 iOS 应用

【基于Flutter&Flame 的飞机大战开发笔记】展示面板及重新开始菜单

抢先体验! 在浏览器里写 Flutter 是一种什么体验?

由点汇聚成字的动效炫极了

【基于Flutter&Flame 的飞机大战开发笔记】利用bloc管理游戏状态

Flutter 绘制探索 | 来一起画箭头吧

【Flutter入坑】Mac + VS Code + Android真机环境搭建

【基于Flutter&Flame 的飞机大战开发笔记】子弹升级和补给