美文网首页Flutter
flutter超详细环境搭建(Mac版)

flutter超详细环境搭建(Mac版)

作者: 十年之后_b94a | 来源:发表于2022-01-04 16:16 被阅读0次

    windows环境搭建教程传送门

    下载flutterSdk

    进入fluttersdk下载页,下载后双击解压放入自己文件夹,博主放入的的位置是/Users/[用户名]/Sdk下面。

    配置环境变量

    网上各种教程都是使用vim进行编辑的,但是博主不喜欢这样,我是使用vscode进行编辑的,看操作

    使用mac访达进入/Users/[用户名],使用命令command+shift+.显示隐藏文件,找到文件.bash_profile使用vscode打开

    # flutter sdk位置
    export PATH=/Users/[用户名]/Sdk/flutter/bin:$PATH
    export PATH=/Users/[用户名]/Sdk/flutter/bin/cache/dart-sdk/bin:$PATH
    # 这个因为众所周知的原因配置flutter 网络环境
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

    保存后,别急 此时终端输入flutter命令还是提示找不到,别急,进入终端输入命令vim .zshrc

    source ~/.bash_profile
    

    保存后,即可,输入 fluuter --version

    image.png

    下载Android studio

    进入官网下载,安装过程我这里就不诉说了,对于android sdk的下载地址,介意大家可以和fluttersdk一样新建一个文件夹放入,在继续在Android studio上安装flutter插件

    配置android 环境
    继续我们在.bash_profile填上配置

    #Android studio环境配置 这里是sdk的安装地址
    export ANDROID_HOME="/Users/[用户名]/Sdk/AndroidSdk"
    export PATH=${PATH}:${ANDROID_HOME}/tools
    export PATH=${PATH}:${ANDROID_HOME}/platform-tools
    

    操作完之后我们执行flutter doctor

    image.png
    发现还有两处地方是有问题的,我们继续修复第二项,打开android studio,按照我的界面配置
    image.png
    image.png
    然后继续在终端中输入flutter doctor --android-licenses,然后他会询问什么鬼,一直按y即可。
    完成之后我们继续检查下flutter,终端输入flutter doctor
    image.png

    安装xcode工具

    直接在苹果的appstore中下载安装即可,但是别急,还需安装cocoapods

    sudo gem install cocoapods
    

    如果终端报错

    ERROR :Error 、、、、
    

    那就安装低版本的

    sudo gem install cocoapods -v 1.10.0
    

    在执行flutter doctor

    image.png

    至此我们的环境 安装完毕。

    创建第一个flutter项目

    flutter create [项目名称]
    

    注意你的虚拟机,因为我们这里安装了xcode 你可以在vscode右下角中选择iphone的虚拟机运行


    image.png

    至此我们结束了,已经可以跑起来了!!

    相关文章

      网友评论

        本文标题:flutter超详细环境搭建(Mac版)

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