最新 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,问题解决请添加图片描述
    大功告成!
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
课程首先介绍了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项目分析与设计、初始化工程、持久层实现、表示层实现。 
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、付费专栏及课程。

余额充值