Flutter入门(一):环境搭建ForMacOS(AS+VS)

881 阅读7分钟

  1. 本文章整理了3种搭建方式
  2. 之前写leetcode的时候装了VS(看中VS轻巧),不喜欢同样的工具重复安装,也不怕折腾,所以肝了一天方法1,把环境搭建完了。

第一步:配置Flutter

1.1 下载SDK

  1. Flutter官网,选择对应系统的SDK进行下载,然后将文件解压。

    Snipaste_2021.10.28_16.05.48-down.jpg

  2. 解压后的文件夹直接放到Home路径下:~/flutter。这类型的文件(比如cocopods)通常我都放到Home路径下统一管理,方便终端里直接使用。(具体怎么放看自己习惯,也有放opt的)

1.2 配置环境变量

  1. Flutter的SDK中包含了很多命令行工具,所以要在~/.zshrc中添加一下环境变量配置,方便在终端直接使用。

    #Flutter 配置
    export FLUTTER=~/flutter
    export PATH=$FLUTTER/bin:$PATH
    
  2. Flutter在运行的时,需要下载所需要的资源。所以需要同时配置镜像服务器,如上面下载SDK时,官网的重要提示。

    #Flutter 镜像配置
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
  3. 配置好之后,根据shell不同执行各自的命令加载配置。

    bash:      source ~/.bash_profile
    zsh:       source ~/.zshrc
    
  4. 执行Flutter专门检测环境配置情况的命令:

    flutter doctor
    

的就是已经配置好了的,×的就是缺失的。这是我最终配置好的图,这对于编译运行Flutter已经足够了。 Snipaste_2021.10.29_21.25.20_batch.jpg

1.3 可能出现的问题

1.3.1 source: no such file or directory: .zshrc

未找到.zshrc,也就是~目录中还没有.zshrc文件。从macOS Catalina 版开始,Mac使用 zsh 作为默认登录 Shell 和交互式 Shell,之前都使用的是bash,一路升系统过来的Mac可能会出现这个问题。

解决方案2种:

  1. 手动创建:启动Terminal,在默认目录~中直接输入命令
    touch .zshrc
    
    然后用Sublime Text打开,加入Flutter相关配置。
  2. 自动创建:安装Oh my zsh,安装好后OMZ会自动创建一个.zshrc文件,OMZ相关配置已经写入了,在最后面加上Flutter相关配置就可了。

之前的环境配置还在.bash_profile中的,只要.zshrc中加入一条命令就可。

source ~/.bash_profile

第二步:配置Java

2.1 检查Java版本

这一步是整理的时候写到了Android-SDK配置的前面,经验来于我的实际搭建过程,因为出现了错误,并且查到了android-sdk requires Java 8。使用命令先检查一下当前安装的Java版本,如果正好是1.8,那就直接跳进入下一步开始配置Android-SDK。

java -version

结果可能会出现下面2种情况:

  1. 显示的是OpenJava-XX。如bash那个问题一样,一路升级系统上来的Mac,倘若升级前系统中也没有安装过Java,那新系统默认会有OpenJava,相对于它更加稳定的是OracleJava,卸载掉OpenJava,安装OracleJava 8
  2. 已经安装java,但是可能都已经升级到Java高版本11或者17,亲测搞不了,建议还是退回到1.8。

2.1.1 卸载OpenJava或不需要的版本

OpenJava和OracleJava是可以同时存在的,只要在使用是将环境变量配置好就可以了,但是我不喜欢重复功能冗余,所以其他版本都删了,只安装了需要的Java8。执行命令,将文件夹下的不需要哦版本删除即可。

open /Library/Java/JavaVirtualMachines/ 

2.2 安装Java8

对于安装,整理了2种安装方式,看自己习惯:

  1. 使用Hombrew命令安装,安装后将SDK的路径配置到环境变量里。

     brew install --cask homebrew/cask-versions/temurin8
    
  2. 去到Oracle官网下载Java8,然后将dmg安装就可。官网下载需要使用Oracle帐号登录,可以借用这个分享出来的帐号进行直接下载,省的自己注册。

    下载java8

安装完再检查一下java版本,如果是这个样子就可了。

javaV_batch.jpg

2.3 配置环境变量

配置Java环境变量,使Android-SDK中的一些命令能找到依赖的Java类。

#Java Path
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_311.jdk/Contents/Home
export PATH=$PATH:$JAVA_HOME/bin:$JAVA_HOME/jre/bin

2.4 Android模拟器安装

模拟器安装夜神MuMu都可以,原生模拟器并不是那么好似。

补充:
安卓模拟器试了好几个,最终还是用了网易MuMU比较省心。夜神动不动99卡死了,启动virtual box也不管用,真的是闹死心,启动10次,其中9次99%卡死。

2.5 可能出现的问题

2.5.1 Java8与JDK8和JDK1.8有什么区别?

其实没有差别,简而言之说的都是同一个东西。

至此查看细节。

2.5.2 could‘t find required JDK tools

安装其他版本的java,或者OpenJava大概率会出现以下错误

Kotlin could not find the required JDK tools in the Java installation

第三步:Andorid-SDK配置

3.1 Android具体需要装什么?

对于Flutter的安卓运行环境,需要安装的必要包共4个,即:

  • android-sdk-----(最基础的SDK,由它再来下载其他tools)
  • build-tools------(开发所需的构建工具)、
  • platform-tools--(包含adb, fastboot 等工具包)
  • platforms-------(开发所需的SDK,就是常说的安卓6.0、8.0)

3.2 安装android-sdk

依旧提供2种安装方式,看自己习惯。

  1. 使用Hombrew命令安装,执行完成后,开始安装其他工具包。

     brew install --cask android-sdk
    
  2. 手动下载,解压然后配置,下载地址我已整理好了,点击直接下载android-sdk_r24.4.1-macosx,将解压后的文件位置安排好后,进行下一步其他包的安装。

3.2 安装其他tools

安装好Android-SDK后,按照下面的步骤开始使用SDK中的sdkmanager进行其他tools的安装(扩展使用可查看sdkmanager官方使用说明 ),步骤2中的路径是使用brew安装后android-sdk的路径:

1. Terminal
2. cd /usr/local/Caskroom/android-sdk/4333796/tools/bin
3. sdkmanager "build-tools;31.0.0"
4. sdkmanager "platforms;android-31" 
5. sdkmanager "platform-tools" 

全部安装完以后,执行命令可以查看整体tools包的安装情况,如图就可。

sdkmanager --list

android-sdk done.jpg

3.3 配置环境变量

配置Android的环境变量,为了使Flutter能搞找到相关文件。

# Android Path
export ANDROID_HOME=/usr/local/Caskroom/android-sdk/4333796
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

接下来再执行 flutter doctor,安卓部分应该已经了。

3.4 可能出现的问题

3.4.1 Android SDK not found

  1. android-sdk的tools或者platform-tools路径配置有问题
  2. Android需要的其他tools包安装不完整
  3. Java安装的版本不对

3.4.2 Android license status lunknown

打开Terminal输入命令然后一顿y

flutter doctor --android-licenses

第四步:VS Run Dome

4.1 安装Dart插件

打开VS,Shift+Cmd+Xflutter插件安装上即可。创建新的项目时,如果有出问题,就直接使用flutter create命令行创建。

iFlutter_batch.jpg

至此,Flutter环境搭建就完成了,如果Dome创建成功的话,就可以运行到iOS和Android的模拟器了。


如果文章整理的内容对你有帮助,请点个赞喔!👍

传送汇总资源

使用AS快速搭建。|| Flutter官网 || 官网搭建指导

android-sdk_r24.4.1-macosx 直接下载 || sdkmanager 官方使用说明

下载Java8 || 分享出来的帐号

Java8与JDK8和JDK1.8有什么区别?

夜神官网

flutter安装遇到的坑