美文网首页
Mac下Flutter 工程搭建

Mac下Flutter 工程搭建

作者: 余晖依旧耀眼 | 来源:发表于2021-10-25 13:54 被阅读0次

    环境:
    MacPro电脑系统macOS Big Sur 11.6
    Flutter SDK
    Xcode
    Andriod Studio

    1 安装Flutter

    安装步骤可以直接参考官网官网

    1.1 下载Flutter SDK

    1.1 进入官网

    image.png

    1.1.2 选择对应的系统

    image.png

    1.1.3 下载最新压缩包

    image.png
    sdk下载传送门

    1.1.4 解压SDK包

    下载完成后,接下来就是安装路径。
    因为Flutter的SDK中包含了很多命令行工具,所以建议安装到你平时放命令行工具程序的地方!这里放在了家目录下~/flutter(目录仅供参考)

    1.2 配置环境变量

    Flutter在运行的时候去要去服务器下载资源,而资源又在国外的服务器上,所以这个地方要么你“科学上网”,要么就是使用镜像服务器。
    其实官网早就有提示


    image.png

    1.2.1 镜像配置

    来到shell进行配置文件配置
    本机使用的zsh,所以配置~/.zshrc文件。如果没有此文件,请执行

    touch ~/.zshrc
    

    如果你的mac默认的是bash,请配置~/.bash_profile文件

    #flutter 镜像
     export PUB_HOSTED_URL=https://pub.flutter-io.cn
     export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

    1.2.2 环境变量配置

    同样是在~/.zshrc或者~/.bash_profile中配置

    #flutter 环境变量
    export FLUTTER=~/flutter
    export PATH=$FLUTTER/bin:$PATH
    

    ⚠️FLUTTER=(你的flutter安装地址)
    文件配置完成后,执行

    source ~/.zshrc
    #bash 执行 source ~/.bash_profile
    

    执行结束后,检查flutter安装情况,执行

    flutter doctor
    

    会出现如下结果


    image.png

    对号表示没有问题,叉号表示没安装好

    2 Xcode安装

    直接前往Appstore安装,这里就不再啰嗦

    3 配置Andriod Studio

    3.1 下载ndriod Studio

    国内官网传送门下载

    image.png

    3.2配置SDK

    直接根据安装引导,整个过程无需“科学上网”
    当然我们还可以直接在Andriod Studio 偏好设置页面


    image.png

    如果要下载的sdk显示不全,请去掉Hide Obsolete Packages中的对号

    3.3配置flutter插件

    image.png

    当出现如下弹框时


    image.png

    选择Install 进行安装
    安装完成 重启Andriod Studio后,出现如下页面


    image.png

    3.4 解决证书问题

    3.4.1 执行 flutter doctor出现如下报错

    image.png

    可以执行

    flutter doctor --android-licenses
    

    当提示是否接受许可时,直接一顿y

    3.4.2 如果如下报错

    image.png

    在偏好设置中,先下载最新的SDk


    image.png

    然后继续执行上面flutter doctor --android-licenses
    最后执行flutter doctor,可以看到关于Android license的报错已经没有了。

    3.5 更换夜神模拟器(自己选择,可以不换)

    因为好用,支持Mac,所以就换(关键还能玩游戏)


    image.png

    安装完,直接启动模拟器,然后就能在as中使用了


    image.png

    3.5.1如果发现模拟器卡在99%不动了,请看看这里

    image.png

    3.5.2如果打开了夜神模拟器,发现as上搜索不到

    第一步 检查Virtual Box的状态是否是正在运行


    image.png

    第二步 执行

    #进入夜神软件目录
    cd /Applications/NoxAppPlayer.app/Contents/MacOS
    #连接夜神模拟器
    adb connect 127.0.0.1:62001
    

    然后就可以在as中选择夜神模拟器了

    4 创建flutter工程

    直接创建个flutter工程,开始搞起来

    4.1 创建flutter工程

    4.1.1 选择New Flutter Project

    image.png

    4.1.2 Flutter

    image.png

    4.1.3 工程名称

    image.png

    这里的工程名字不能用驼峰命名法,只能小写+下划线隔开
    此时你开心的run,然后控制台输入出卡住了

    4.2 Gradle卡住

    然后发现,你首次运行的时候,卡在这一块,因为Gradle的Maven仓库在国外服务器,然后你懂的哈···


    image.png

    解决这个问题,换个国内镜像

    4.2.1 修改flutter安装目录中的flutter.gradle文件

    执行:

    # ~/flutter 你的flutter安装路径
    vi  ~/flutter/packages/flutter_tools/gradle/flutter.gradle
    

    增加改镜像地址

    buildscript {
        repositories {
    //        google()
    //      mavenCentral()
    //更换镜像地址
    maven { url 'https://maven.aliyun.com/repository/google' }
    maven { url 'https://maven.aliyun.com/repository/jcenter' }
    maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:4.1.0'
        }
    }
    

    4.2.2 修改工程目录中的build.gradle文件

    文件目录项目-andriod-build.gradle


    image.png

    修改完之后,继续run

    4.2.3 大功告成 结束

    我这里用的夜神模拟器,你可以选择web、iOS模拟器等都可以


    image.png

    以上就是本人在创建mac环境下flutter工程遇到的问题和解决方法,如果有什么不对的地方,还敬请大神指点。

    相关文章

      网友评论

          本文标题:Mac下Flutter 工程搭建

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