美文网首页
Flutter环境搭建ForMac

Flutter环境搭建ForMac

作者: 这世界总会好的 | 来源:发表于2019-10-28 11:10 被阅读0次

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter的环境搭建是有一些坑,本文是针对Flutter的环境搭建的流程记录,同时选择了Android Studio作为开发Flutter的工具。希望对大家的安装Flutter有所帮助。

    01.安装Flutter

    1.1 下载Flutter SDK

    1.1.1 进入官网获取最新安装包,跳转下载页

    image.png

    1.1.2 选择对应系统安装包


    image.png

    1.1.3 解压安装包
    下载完成后,解压到自己想安装的路径。

    1.2 配置环境变量

    1.2.1 配置镜像及路径
    由于Flutter在运行的时候需要去官方下载资源,因此没有vpn的话需要使用镜像。(图片来源官网)


    image.png
    如果使用默认的bash: vim ~/.bash_profile
    如果使用zsh:vim ~/.zshrc
    Flutter镜像配置:
        export PUB_HOSTED_URL=https://pub.flutter-io.cn
        export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
    Flutter路径配置:
        export PATH=‘对应自己flutter的安装路径’/flutter/bin:$PATH
    

    1.2.2 运行命令 flutter doctor
    查看是否需要安装其他依赖。(绿色✅标示表示配置ok,红叉标示为未配置好)


    image.png

    02.Android Studio

    2.1安装 Android Studio

    安装 Android Studio可以去官网下载,跳转下载页
    下载完成后安装即可。(如图为安装完成)

    image.png

    2.2 配置SDK

    使用 flutter doctor 检测
    使用提示中的命令解决Android证书问题。全部执行y即可。


    image.png

    2.3 配置Android环境变量

    #Android 环境配置
    #Android
    export ANDROID_HOME=~/Library/Android/sdk
    #Android 模拟器路径
    export PATH=${PATH}:${ANDROID_HOME}/emulator
    #Android tools路径
    export PATH=${PATH}:${ANDROID_HOME}/tools
    #Android 平台工具
    export PATH=${PATH}:${ANDROID_HOME}/platform-tools
    

    2.4 安装Android Studio的Flutter插件

    缺少Flutter插件:


    image.png

    2.4.1 打开 Android Studio -> Preferences->Plugins->搜索flutter


    image.png

    重新打开后如图:


    image.png

    03.安装过程中可能的问题

    3.1 系统偏好设置->安全性与隐私


    image.png

    3.2 Xcode 版本问题


    image.png

    3.3 安装报错


    image.png

    解决问题:

    $ brew link pkg-config
    $ brew install --HEAD usbmuxd
    $ brew unlink usbmuxd
    $ brew link usbmuxd$ brew install --HEAD libimobiledevice 
    $ brew install ideviceinstaller 
    

    相关文章

      网友评论

          本文标题:Flutter环境搭建ForMac

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