最新 Mac 搭建 Flutter 开发 环境 入门 保姆 小白 菜鸟 教程 2023.6.16

已于 2023-06-19 01:11:45 修改
阅读量1.6k 收藏 3
点赞数 3
分类专栏： flutter macos 开发环境搭建 文章标签： flutter macos
于 2023-06-17 15:03:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stickyourass/article/details/131250282
版权

最新 Mac 搭建 Flutter 开发 环境 入门 保姆 小白 菜鸟 教程 2023.6.16

获取一台Mac电脑

确定配置需求

我的需求是：笔记本、屏幕16寸及以上、运行内存16G及以上、存储512G及以上、年份越新越好、越便宜越好。
笔记本方便携带；屏幕大眼睛舒服；私以为运行内存16G刚好，少了不够，多了浪费；存储512G也够用了；年份我选最新的，因为太旧的电脑不能直接调试（插usb线调试）新一些的iphone，也不能打包发布苹果的应用；便宜就不用说了，要的就是一个生产工具而已。

购买

根据上面的需求，我最终从转转上买了一台二手的2021年款的MacBook Pro 16+512，9858元，它的出库时间是2022年1月
请添加图片描述

安装非开发软件

  1. 买的二手的，肯定第一件事就是抹掉所有内容和设置
  2. 安装各种浏览器：Chrome等等
  3. 安装科学上网工具
  4. 安装各种要用的软件：微信等等

安装开发环境

安装Android Studio

  1. 下载地址：https://developer.android.google.cn/studio
  2. 安装就一路点默认就安装好了

安装Xcode

  1. Apple store 搜索 Xcode 下载安装就行了

安装Flutter

下载Flutter

下载地址：https://flutter.cn/docs/get-started/install/macos

解压Flutter

下载下来是个zip，解压，我喜欢解压到文稿

配置环境变量

不知道是不是这么讲，反正windows上面是

  1. 打开终端执行：

vim ~/.bash_profile

  1. 按一下I键
  2. 新加下面一行，注意黄色标记部分要改成自己的flutter/bin路径

export PATH=/Users/yangpeng/Documents/flutter/bin:$PATH

  1. 按一下esc键
  2. 执行：

:wq

  1. 执行：

source ~/.bash_profile

  1. 执行，如果出现一大堆东西，说明环境变量配置成功

flutter

请添加图片描述

如果没有出现，检查一下步骤再试一次或者参考一下这个https://blog.csdn.net/gongxiaoou/article/details/103388818，我退出终端后再打开终端就需要再次重复上述步骤6，才能有flutter命令，是因为我的Mac的默认shell是zsh，在【终端】-【设置】-【通用】-【shell的打开方式】把zsh改成bash就行了

请添加图片描述

解决Flutter问题

查看Flutter问题

打开终端，执行

flutter doctor

请添加图片描述
这些是我这的flutter出现的问题，上次解决这些问题已经是两年了，都忘得差不多了，而且年年都会变，其实都是去网上查，一件一件解决

✗ cmdline-tools component is missing
  1. 打开【Android Studio】-【Settings】，跟着下图1、2操作
    请添加图片描述
  2. 打开终端并执行，注意要将黄色标记部分改成上图的sdk地址

flutter config --android-sdk /Users/yangpeng/Documents/androidstudio

好了，这个问题解决了

✗ CocoaPods not installed
  1. 安装brew，打开终端并执行：

/usr/bin/ruby -e “$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)”

  1. 安装gpg，执行：

brew install gnupg

  1. 安装rvm
  • 执行：

gpg --keyserver hkp://pgp.mit.edu --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
如果显示从公钥服务器接收失败则尝试下面的
gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3

  • 在 https://www.ipaddress.com/ 查询 raw.githubusercontent.com 的真实IP

请添加图片描述
请添加图片描述

  • 将查到的IP地址写入hosts

sudo vim /etc/hosts

  • 按一下I键
  • 新加一行加上，注意黄色部分是上图查到的服务器地址，随便哪个都行

185.199.110.133 raw.githubusercontent.com

  • 按一下esc执行：

:wq

  • 分别执行：

\curl -sSL https://get.rvm.io | bash -s stable
source ~/.bashrc
source ~/.bash_profile
rvm -v

  • 上面的rvm -v是打印版本命令，若显示rvm 1.29.12 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]则表示rvm安装成功
  1. 安装ruby
  • 查看自己要安装的版本，我当时看到的最新的是3[.0.0]就安装了它

rvm list known

  • 安装指定版本

rvm install 3.0.0

  • 将3.0.0设为默认版本

rvm use 3.0.0 --default

  • 查看已安装的 ruby

rvm list

  • 更换源，分别执行

sudo gem update --system
gem sources --remove https://rubygems.org/
gem sources --add https://gems.ruby-china.com/

  • 验证镜像源是是否安装成功：

gem sources -l

  1. 安装cocopods，执行：

sudo gem install -n /usr/local/bin cocoapods

  • 安装本地库

pod setup

  • 下载完成之后检查是否可用，可查找任意三方库，这里以AFNetworking为例

pod search AFNetworking

到这里，cocopods就装好了，执行flutter doctor看看效果吧，还不行再参考一下：
https://blog.csdn.net/qq_25218777/article/details/111062192
https://blog.csdn.net/u011123714/article/details/112186065
https://juejin.cn/post/7031726748811132958
https://juejin.cn/post/7067845821290676232

[!] Network resources

在我当时的网络条件下(Mac连着手机热点，开着VPN)，问题就只剩下✗ HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host，在网上找到了解决办法：https://blog.csdn.net/ouhuanquan/article/details/123134340

  1. 找到flutter sdk的文件目录，打开flutter\packages\flutter_tools\lib\src\http_host_validator.dart
  2. 将https://maven.google.com/ 修改为https://dl.google.com/dl/android/maven2/
  3. 关闭cmd命令窗口，重新打开cmd窗口
  4. 去到flutter\bin目录，删除cache文件夹
  5. 在cmd命令窗口重新运行flutter doctor，问题解决请添加图片描述
    大功告成！
stickyourass
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Flutter教程：如何在 macOS 上安装和配置 Flutter 开发环境
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
06-14 1949
Flutter教程：如何在 macOS 上安装和配置 Flutter 开发环境
Mac系统下Flutter安装教程
it_lanmei的博客
11-22 9480
Flutter + Xcode + Android Studio + Dart + VSCode
mac电脑配置flutter完整详细的流程
qq_36524413的博客
05-07 1096
这就是为什么报错的原因了 解决方法 把我们下载的jdk17的Contents 文件夹替换掉这个自带路径下的Contents 文件夹 然后重新执行flutter doctor --android-license. 这个时候按照提示 一直输入y 就可以了。这个时候 第一个问题来了 你会发现当你把终端退出后 重新打开终端 输入flutter --version 他会报错 提示你 flutter not found 这个时候 输入 vim ~/.zshrc 会出现下面的这个页面。
# Mac环境如何安装Flutter：全面指南
最新发布
smileKH的博客
06-09 1377
Flutter 是 Google 开发的开源移动 UI 框架，允许开发者使用 Dart 语言快速在 iOS 和 Android 上构建高质量的原生界面。本指南将详细指导您如何在 Mac 环境下安装 Flutter，确保您能够顺利开始 Flutter 开发之旅。
Flutter 项目：flutter的安装和环境配置
03-10
flutter
Flutter的菜鸟教程
大灰狼的小绵羊哥哥的博客
05-12 1万+
Flutter的菜鸟教程一:第一个Flutter应用 Flutter的菜鸟教程二:最简单的MaterialApp Flutter的菜鸟教程三:Row/Column布局 Flutter的菜鸟教程四:ListView Flutter的菜鸟教程五:Container Flutter的菜鸟教程六:Stack Flutter的菜鸟教程七:Card Flutter的菜鸟教程八:侧滑删除 Flu...
Flutter编程指南之跨平台APP开发：手把手带您完成【我的备忘录】
10-26
课程首先介绍了Flutter的主要知识，通过4个案例消化吸收知识点。并通过手把手一步步带您完成一个【我的备忘录】APP项目，使得您真正认识Flutter在实际项目中的优势。  通过本课程学习您可以学习到Flutter技术如下知识：第1章 Flutter概述知识点：移动应用开发现状、移动应用开发类型、Hybrid与移动跨平台开发策略、Flutter是什么？、Flutter特点、Flutter体系结构。第2章 Flutter开发环境搭建知识点：基于Windows的Android开发环境、基于macOS的iOS开发环境、IDE开发工具设置。第3章 Flutter基础知识点：完成一个Flutter程序、一切都是组件（Widget）、组件分类、使用图片和图标资源、使用文本组件、增加调试组件工具。第4章 布局组件知识点：Flutter布局概述、容器布局（Container）、行（Row）、列（Column）布局、层叠布局、ListView、GridView。第5章 Material风格组件知识点：按钮、输入框、复选框、单选按钮、开关按钮、滑块。第6章 iOS Cupertino风格组件知识点：iOS Cupertino页面、Cupertino按钮、Cupertino开关按钮、Cupertino滑块、Cupertino分段控件。第7章 状态管理知识点：状态管理概述、局部状态管理、全局状态管理。第8章 导航知识点：导航概述、面包屑导航、标签导航、页面组件分散在不同文件中、全局状态管理与导航。第9章 工程依赖管理知识点：工程依赖管理概述、pub依赖管理工具。第10章 数据存储知识点：Flutter数据存储策略、键值对数据存储、文件数据存储、SQLite数据存储、示例：数据CRUD操作。第11章 网络通信知识点：搭建自己的Web服务器、使用http包、示例：城市信息列表。第12章 项目实战：我的备忘录APP知识点：备忘录APP项目说明、备忘录项目后台Web服务API说明、备忘录APP项目分析与设计、初始化工程、持久层实现、表示层实现。 
Mac 下安装flutter图解
star_nwe的博客
10-06 1192
创建完成了，把原来的那个删除了。如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
Flutter开发环境搭建 for mac
01-20
(brew 是 Mac 下的一个包管理工具，类似于 centos 下的 yum，可以很方便地进行安装/卸载/更新各种软件包，例如：nodejs, elasticsearch, kibana, mysql, mongodb 等等，可以用来快速搭建各种本地环境，程序员必备...
超级详细flutter开发环境搭建
01-03
一、在Windows上搭建Flutter开发环境 系统要求 要安装和运行Flutter，您的开发环境必须满足以下最低要求： 操作系统Windows 7 SP1或更高版本(64位) 磁盘空间：：400 MB(不包括IDE/Tools的磁盘空间)。 工具颤振取...
flutter开发入门与实战教程.pptx
07-26
史上最全flutter开发介绍，flutter开发入门教程，flutter开发入门与实战教程 flutter开发环境搭建全说明，flutter开发示例和DEMO教程，50多页ppt详细讲解。
Android Studio下Flutter环境搭建图文教程
01-05
一、Flutter介绍 ...插件，并下载flutterSdk到本地，配置在环境变量即可，其实 中⽂⽹的搭建Futter开发环境 已经很贴⼼详细，从平台指引开始安装基本都不会遇到问题。 1.下载AndroidStudio中的插件 Dart和Flut
Flutter 之 Windows 环境搭建.pdf
11-19
Dart、Flutter 环境搭建
【Flutter】Flutter安装和配置超详细（mac）
It一zhai男
06-21 1万+
Flutter安装和配置，Flutter和原生混合开发，原生集成flutter的两种方式
Flutter的菜鸟教程一:第一个Flutter应用
热门推荐
duo_shine的博客
07-27 3万+
Flutter是什么？ 跨平台(Android/ios)构建移动应用程序的简单高效方式 Flutter核心只有一层轻量的C/C++代码，而上层使用了Dart语言(一种现代的、简洁的、面向对象的语言-ps:我没学直接当java来用了。。。), 更多了解Flutter可以去官网,包括安装Flutter的开发环境,为什么不从安装开发环境开始？我在学习Flutter的过程中发现只要baidu输入Fl...
Flutter 下载安装，环境配置，以及简单使用 | mac 苹果电脑 | Android 开发
m0_61780691的博客
12-03 2901
好，到这里我们的环境配置和简单使用就弄好啦，希望大家都能有所得，我们下期在见，拜拜。
MacOS搭建Flutter 环境
仁希的博客
07-15 1700
提示：Waiting for another flutter command to release the startup lock…第三步：进入自己的工具(Android studio/vs code)，在设置中配置flutter路径。第四步：下载flutter插件，flutter插件集成了dart插件，不需要再下dart插件。下载成功后会自动解压，把Flutter文件放到自己指定的位置。第一步：官网下载对应版本的flutter SDK。MacOS有两个版本：x64和 arm64。
Flutter - Mac m1和Windows10配置flutter环境 ，iOS原生项目接入flutter
iotjin的专栏
12-30 5802
参考资料： Flutter iOS 混合工程自动化 Flutter 与 iOS 混合项目初探 Flutter混合开发(二)：iOS项目集成Flutter模块详细指南 Flutter 开发 （1）iOS 下超详细集成 Flutter  Flutter中文网 在macOS上搭建Flutter开发环境 1.下载flutter SDK https://flutter.cn/docs/deve...........................
用flutter 开发windows应用，可靠吗，怎么搭建环境和步骤
06-10
Flutter可以用来开发跨平台的移动应用和Web应用程序，但也可以用于开发桌面应用程序，包括Windows应用程序。Flutter Desktop是Flutter的一个实验性分支，可以用于构建Windows、macOS和Linux上的本地应用程序。下面是在Windows上搭建Flutter Desktop环境并开始开发Windows应用程序的步骤： 1. 安装Flutter SDK：首先，您需要安装Flutter SDK。您可以从Flutter官方网站（https://flutter.dev/docs/get-started/install/windows）下载Flutter SDK并按照指示进行安装。 2. 安装Visual Studio Code：您需要安装Visual Studio Code（VS Code），这是一个轻量级的代码编辑器，非常适合Flutter开发。 3. 安装Flutter和Dart插件：在VS Code中，您需要安装Flutter和Dart插件。打开VS Code并按下Ctrl+Shift+X，搜索Flutter和Dart插件，然后单击“安装”按钮。 4. 安装Flutter Desktop工具包：Flutter Desktop需要一些额外的工具和库来构建本地应用程序。您可以从https://github.com/google/flutter-desktop-embedding/releases下载Flutter Desktop工具包，并将其解压缩到任何位置。 5. 配置环境变量：打开系统环境变量设置，并将Flutter和Dart的bin目录添加到PATH变量中。例如，如果您将Flutter和Dart安装在C:\flutter和C:\dart中，则应将C:\flutter\bin和C:\dart\bin添加到PATH变量中。 6. 创建Flutter应用程序：现在，您可以使用VS Code创建Flutter应用程序。打开VS Code，单击“文件”>“新建文件夹”，然后为您的应用程序选择一个位置。然后，按下Ctrl+Shift+P，搜索“Flutter”，并选择“Flutter: New Project”。按照指示创建Flutter应用程序。 7. 集成Flutter Desktop：现在，您需要将Flutter Desktop添加到您的Flutter应用程序中。在您的Flutter应用程序根目录下，打开pubspec.yaml文件，并添加以下依赖项： ``` dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter desktop_window: ^0.5.1 path_provider: ^1.6.11 sqflite: ^1.3.2+1 path: ^1.7.0 ``` 然后，运行以下命令，从Flutter Desktop工具包中获取所需的文件： ``` flutter packages get flutter packages pub run build_runner build --delete-conflicting-outputs ``` 8. 运行应用程序：现在，您可以运行您的Flutter应用程序。打开终端并导航到您的应用程序根目录，然后运行以下命令： ``` flutter run -d windows ``` 这将启动您的Flutter应用程序，并在Windows上运行。这是使用Flutter在Windows上开发应用程序的基本步骤。但是，需要注意的是，Flutter Desktop还处于实验阶段，可能存在一些问题和限制。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值