检查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
正常建完之后