配置的版本

Mac OS X: 10.15.6 (19G2021)
Flutter SDK: 1.20.4 • channel stable
Xcode: 12.2 (12B45b)
Android Studio : 4.1

1 安装Flutter

1.1 下载Flutter的SDK

1.1.1 进入官网—>Get Started

截屏2020-12-17 上午9.42.50.png

1.1.2 选择对应的系统

image.png

1.1.3 选择最新版本下载

image.png

1.1.4 解压安装包到安装路径

因为Flutter的SDK中包含很多命令行工具,需要配置环境变量,所有建议安装到平时放命令行工具程序的地方,可以安装在根目录下:/flutter

1.2 配置环境变量

1.2.1 配置镜像

因为Flutter在运行的时候,需要去官网下载所需要的资源,没有“梯子”的小伙伴就需要配置镜像服务器,以下是官方文档的链接:Using Flutter in China

清华大学镜像网:https://mirror.tuna.tsinghua.edu.cn

image.png
来到对应的shell的配置文件进行配置:
如果是bash 那么配置 ~/.bashprofile
如果是zsh(Mac新系统默认是zsh) 配置 ~/.zshrc
(关于shell的Linux知识补充请参考:[_Linux简介)](https://www.jianshu.com/p/2ca7f448ffa7)

1) 查看当前shell : cd ~ chsh 2) 切换shell: chsh -s /bin/bah 3)zsh配置: cd ~ vi .vimrc

  1. " Configuration file for vim
  2. set modelines=0 " CVE-2007-2438
  3. " Normally we use vim-extensions. If you want true vi-compatibility
  4. " remove change the following statements
  5. set nocompatible " Use Vim defaults instead of 100% vi compatibility
  6. set backspace=2 " more powerful backspacing
  7. " Don't write backup file if vim is being called by "crontab -e"
  8. au BufWrite /private/tmp/crontab.* set nowritebackup nobackup
  9. " Don't write backup file if vim is being called by "chpass"
  10. au BufWrite /private/etc/pw.* set nowritebackup nobackup
  11. let skip_defaults_vim=1
  12. syntax on " 语法高亮
  13. colorscheme default " 设置主题
  14. set number " 显示行号
  15. set cindent " C风格的对齐方式
  16. set autoindent " 自动对齐
  17. set confirm " 在处理未保存或只读文件的时候,弹出确认
  18. set tabstop=4 " Tab键的宽度
  19. set showmatch " 高亮显示对应的括号
  20. set matchtime=5 " 对应括号高亮的时间(单位是十分之一秒)
  21. set completeopt=preview,menu "代码补全

shell的配置:Flutter镜像配置

  1. #Flutter镜像配置
  2. $ export PUB_HOSTED_URL=https://pub.flutter-io.cn
  3. $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1.2.2 配置Flutter环境变量

将Flutter命令行工具的路径配置以下,还是在对应的shell的配置文件中

  1. #Flutter命令行工具配置
  2. $export FLUTTER=/flutter/bin
  3. $export PATH=$FLUTTER:$PATH

配置完成后保存后,重新打开终端

  1. source ~/.bash_profile

1.2.3 检测配置是否完成

Flutter有一个doctor检测指令,用于检测Flutter的环境

  1. flutter doctor

打钩的就是配置好了
image.png

1.2.4 Mac文件属性

image.png

1.2.5 文件类型与权限

截屏2021-05-10 上午11.27.11.png

1.2.6 改变权限:chmod

截屏2021-05-10 上午11.29.11.png

2 配置安卓环境

2.1 安装Android Studio

先去官网下载Android Studio
image.png

2.2 配置SDK

首次启动会提示安装SDK,安装过程无需翻墙,但是有一个工具是需要我们手动安装的
安装好SDK后,打开Android Studio
CMD+, 进入偏好设置
如下图安装
image.png

2.3 安装Android Studio的插件

CMD+ , 进入偏好设置
image.png
当跳出安装Dart插件的界面 也点击YES进行安装

安装完成后重启Android Studio,可以看到Start a new Flutter project
image.png

2.4 解决许可证的问题

再次进行Flutter检测 Flutter doctor 发现许可证问题
image.png
打开终端 输入

  1. flutter doctor --android-licenses

2.5 解决Gradle卡主问题

首次运行的时候,发现会卡主,原因是Gradle的Maven仓库在国外
Runing Gradle task ‘assembleDebug’…
可以通过配置镜像来解决:

2.5.1 修改项目下的 build.gradle文件

文件路径: 项目 —- Android —— build.gradle文件
修改内容: 找到buildscript和allprojects将里面的

  1. google()
  2. jcenter()

修改我阿里云镜像

  1. maven { url 'https://maven.aliyun.com/repository/google' }
  2. maven { url 'https://maven.aliyun.com/repository/jcenter' }
  3. maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }

image.png

2.5.2 修改Flutter安装目录下的flutter.gradle文件

文件路径 : flutter/packages/flutter_tools/gradle/flutter.gradle
修改内容:

  1. buildscript {
  2. repositories {
  3. // google()
  4. // jcenter()
  5. maven { url 'https://maven.aliyun.com/repository/google' }
  6. maven { url 'https://maven.aliyun.com/repository/jcenter' }
  7. maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
  8. }
  9. dependencies {
  10. classpath 'com.android.tools.build:gradle:3.5.0'
  11. }
  12. }

2.6 无法打开”idevice_id”,因为无法验证开发者

image.png

  1. sudo spctl --master-disable
  2. //再执行如下
  3. sudo xattr -r -d com.apple.quarantine flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevice_id
  4. sudo xattr -r -d com.apple.quarantine flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevicename
  5. sudo xattr -r -d com.apple.quarantine flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevicescreenshot
  6. sudo xattr -r -d com.apple.quarantine flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/idevicesyslog
  7. sudo xattr -r -d com.apple.quarantine flutter解压后的目录】/flutter/bin/cache/artifacts/libimobiledevice/ideviceinfo