前言

环境:mac m1 13.0 +Xcode 14.0.1 + Android Studio 2021.2.1 + Flutter3.3.6
最近要开发一个地图类项目,一些定位什么的挺烦,不想写两遍,就试试引入Flutter,学习成本大了,可以减少两端差异,蛮好的。浅记录一下学习过程。

一.配置flutter编译环境

  1. 下载flutter编译包
    https://docs.flutter.dev/development/tools/sdk/releases?tab=macos#macos
    在这里插入图片描述

我是m1芯片选arm64,怎么看mac是arm64还是x64

下载过程近一分钟,可以并行安装一下编辑工具及环境:

我是已经装过homebrew cocopods和Xcode、AndroidStudio的了,如果没有装过可以看下我之前的文章或者:看下这篇文章
Androidstudio需要安装一下插件:
在这里插入图片描述
系统证书:
在这里插入图片描述
以上两步一定要先操作,这样我们在后面安装flutter才保证所有环境ok

  1. 下载后解压缩得到文件夹:flutter,我复制到这个路径:/Users/admin/Desktop/workspace/flutter

  2. 添加环境

open ~/.zshrc

内容:admin是你的路径
export PATH=/Users/admin/Desktop/workspace/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

保存环境:
source ~/.zshrc
  1. 进入flutter安装目录执行安装脚本
cd /Users/admin/Desktop/workspace/flutter/
flutter doctor

安装成功如下,如果有缺什么环境就是前面装编译环境时没有配置好,根据提示去配置安装就好:
在这里插入图片描述
5. 许可:需要输入几次同意一直输入y就好了

flutter doctor --android-licenses

在这里插入图片描述
最终ok:
在这里插入图片描述

二、第一个flutter程序

语言是dart,没学过但是写过python,java,c看起来也不是很抗拒,加油~

  1. 创建一个flutter程序
    在这里插入图片描述
    根据需要选择将配置内容:(项目名称全小写,不要问我为什么知道~~)
    在这里插入图片描述

代码我还没开始写,语法也还没学

三、iphone真机调试flutter

  1. 创建好的样子,一般是有个demo的,选择真机调试时会让你填入证书,我这里是用Android QStudio创建的项目,想在iphone上运行的话就要配置一下开发者证书。我这里有之前项目的,如果你没有,需要注册苹果开发者,或者换个Android手机。
    在这里插入图片描述

  2. 直接根据提示去xcode打开配置即可
    在这里插入图片描述
    在这里插入图片描述
    运行效果:
    在这里插入图片描述

总结

本来以为我要开始大干一场了,大佬建议我用h5写写吧,毕竟一个小页面,原有ios引入flutter包代价有点大,如果是学习出发可以大干一场,如果是项目,再根据实际情况考虑考虑哦~

文毕,GoodLuck!

更多推荐