美文网首页
MAC电脑配置Flutter环境

MAC电脑配置Flutter环境

作者: LWide | 来源:发表于2023-02-06 10:54 被阅读0次

    前言

    Flutter目前已经是炙手可热的前端技术,关于他的好处和用处就不多说,接下来说下Mac电脑环境下怎么配置Flutter环境,做个记录也提供给大家
    本次版本:

    • Mac OS X 13.1
    • FlutterSDK 3.7.0
    • Xcode 14.1
    • Android Studio Electric Eel | 2022.1.1

    配置流程

    安装Flutter - 下载Flutter的SDK - 配置flutter环境变量 - 安装VSCode(或者Android studio) - 安装flutter插件 - 安装java和配置环境变量 - 配置模拟器

    说明:用vscode和android开发都可以各有各的利弊,看个人习惯,vscode比较清爽,Android studio 功能比较强大,建议都装上,想用哪个可以自由切换,也方便以后调试安卓代码

    详细配置流程

    安装Flutter

    这里的步骤其实和官方的差不多,大家也可以直接参考 官网

    image.png image.png image.png

    下载完以后,接下来就是安装路径了

    因为Flutter的SDK中包含了很多命令行工具。我们需要配置环境变量,所以建议你安装到你平时放命令行工具程序的地方! 我这里安装在了根目录的opt下!
    /opt/flutter (仅供参考,安装在哪里看你自己的习惯)

    配置环境变量
    来到你对应Shell的配置文件进行配置。
    如果你使用默认的bash那么配置 ~/.bash_profile
    如果你使用zsh(Mac新系统默认是zsh)那么配置~/.zshrc

    #Flutter环境镜像配置
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export PATH=/opt/flutter/bin:$PATH
    

    配置完成后,重新打开终端或者输入命令载入配置

    #你自己的配置文件路径
    $ source ~/.zshrc
    
    

    那么接下来!我们可以看看Flutter是否配置完成了。Flutter有一个doctor检测指令。专门用于检测你的Flutter环境的。

    flutter doctor
    

    打钩就是配置OK了. 叉叉就是还没有配置好的.
    我们最终要看到下图就...解决了差不多了。


    image.png

    至此 flutter配置完成 接下来是安装android studio
    vscode直接去官网下载安装即可,安装完下载flutter插件,这里不再多说

    配置安卓环境

    安装Android Studio
    我们先安装Android Studio可以去国内官网下载

    image.png

    配置SDK
    首次启动会提醒你安装SDK。安装过程无需翻墙,但是有一个工具是需要我们手动安装的。

    注意:这一步很多人会忽略,在后面 flutter doctor 会发现许可证问题。然后还会提示升级SDK,其原因就是这一步没有做对!

    当我们装好了SDK后,打开Android Studio

    • CMD + , 进入偏好设置
    • 如下图安装
    image.png

    安装Android Studio的插件
    来到Studio的偏好设置里面.

    image.png

    当跳出安装Dart插件的界面时,也点击Yes进行安装。

    • 安装完成后重启Android Studio。可以看到有这样的界面
    image.png

    解决许可证问题
    再次进行Flutter的检测$ flutter doctor会发现许可证问题!


    image.png

    打开Iterm(终端)输入下列命令
    然后一顿y

    flutter doctor --android-licenses
    

    配置安卓的模拟器

    去设备管理里面下载一个模拟器,就可以运行项目了

    配置java和Android环境

    export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home"
    export ANDROID_HOME=/Users/lk/Library/Android/sdk
    export CLASS_PATH="$JAVA_HOME/lib"
    export PATH="$PATH:$JAVA_HOME/bin:$ANDROID_HOME/platform-tools"
    

    感谢你查阅.

    相关文章

      网友评论

          本文标题:MAC电脑配置Flutter环境

          本文链接:https://www.haomeiwen.com/subject/fghtkdtx.html