检查brew环境
打开终端, 命令brew
brew
已存在或者macOS软件包安装齐全可跳过
-
不存在, 看下面
brew不存在
详情见brew官方网站
官网已经说明Homebrew是macOS（或 Linux）缺失的软件包的管理器, 使用Homebrew安装 Apple（或 Linux ）没有预装但, 你需要的东西 :)
其实主要安装代码就这一句
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
报错一: Failed to connect to raw.githubusercontent.com port 443: Connection refused
我开始以为是科学上网的原因, 但是换了之后还是同样错误, 看网上其他小伙伴说可以先网页打开github, 再输入命令运行, 我试了下也是一样
主要原因是githubusercontent.com访问不稳定引起的
更换地址(!!! 建议先看完再决定自己是否要按这种方式安装)
/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
emmm..... 不过好像是国人写的镜像加速访问, 中间竟然还有 ad !!!
^ - ^ 不过速度还是挺快的
安装完成时候再brew下可以看到
安装Flutter
详情见Flutter官方网站
下载之后可得到
当然可以把内容移动到一个想要的文件, 这里我不建议flutter放在系统根目录等需要访问权限的目录, 不利于以后的更新修改
配置Flutter环境
方式一
好了之后终端执行命令vim ~/.bash_profile, 配置环境变量
vim ~/.bash_profile
按 i进入编辑模式, 输入
export PATH=/Users/XXXX/Desktop/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
注意
- 第一条配的是你的flutter的位置, 我这里写的绝对路径, 写成相对路径也可,
- 留意不要有空格
按esc退出编辑模式, 输入 :wq保存
执行命令
source ~/.bash_profile这个bash_profile文件修改内容生效, 然后输入flutter -h
source ~/.bash_profile
flutter -h
方式二
当然新版本的mac, 我这边更建议用zsh配置环境变量
export PATH=/Users/XXXX/Desktop/flutter/bin:$PATH
export FLUTTER=~/flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
当然上面也可以写成相对路径, 写好了之后还是source生效和检查一下
source ~/.zshrc
flutter -h
注意
- 留意不要有空格
如果上诉过程, 改出问题导致vim找不到, 点回桌面command + shift + G, 把这2个文件夹下把新增内容删掉, 报错重跑/重启下(大部分都是书写错误或者空格导致)
esc + :wq 关闭, 再次执行source ~/.bash_profile。
执行flutter -h等待会看到下图
表示flutter环境搭建成功, 恭喜恭喜
检查依赖
输入命令flutter doctor, 查看是否需要安装其它依赖项来完成安装
flutter doctor
我是报这个错误, 这里每个人报的错误可能不一样, 按照错误提示一条条改完即可, 如果跟我相同错误的人可以按我下面步骤
Xcode报错
根据提示修改, 首先需要安装Xcode, 直接从AppStore下载即可, 免费的。 安装完成之后终端需要再运行
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
完成之后, xcode错误消失
Android报错
Android Studio 以及JDK 安装教程我这边不描述, 度娘一大堆, 官网下载 Android Studio 留意下自己电脑上是Inter还是M1即可
按图把这几个勾选对即可, 留意下下面的是勾选去掉, 选完点击OK
等待下载
下载完成之后再flutter doctor一下可看到
剩下的黄色感叹号是要接受一些Andriod条款, 当然最求完美的我们, 怎么能容忍黄色感叹号呢
flutter doctor --android-licenses
出现一些条款, 选择y接受即可
完成之后再flutter doctor一下可看到
OK, 完美 :)
建立第一个Flutter项目
VSCode
环境好了之后我们就开始创建第一个Flutter项目吧
这里我用的工具是VSCode, 大家可以官网自行下载
下载完成之后安装一些Flutter扩展插件如图
接下来建立项目
如果你遇到没有找到Flutter SDK问题, 检查下面几点
- 确认已下载好
Flutter的SDK - 确认
VScode中的Flutter插件是否安装 -
Flutter部署的环境PATH都正确
其实能正确走到这步, 以上三点都应该是OK。 所以重启VSCode, 我是了重启电脑之后才OK的, 不得不承认重启这招玄学是真万能 :)
重启之后重复之前操作, 再试一下。
建了个新文件夹放项目, 操作之后发现, 工程没有成功创建, 而且操作输出报这个错误
flutter文件夹→bin→cache→lookfile这个文件找到删除, 然后重启vscode。好吧, 我承认以防万一我又重启次电脑。
再重复次操作发现成功!
这里我们选择个模拟器, 我选择的是ios模拟器
终端→source ~/.bash_profile→flutter run
留意下每次重启项目都要进行一次source ~/.bash_profile配置环境变量
source ~/.bash_profile
flutter run
然后可看到程序正常运行
仿照例子写一句"Hello World!"吧, 在main.dart中
const Text(
'Hello World!',
),
终端control+c回到命令调试, 再一次flutter run, 可看到
Andriod Studio
Andriod Studio → Pluglns → 输入 flutter 安装插件
因为flutter主要是Dart语言, 当跳出Dart插件时候, 点击Install进行安装
安装完成之后重启Andriod Studio可看到有New Flutter Project 说明安装成功
点击一下新建, 然后选择flutter, 其中Flutter SDK path不要乱搞, 之后点击Next
正常建完之后