美文网首页
MacOS系统-配置Flutter环境-0

MacOS系统-配置Flutter环境-0

作者: 代码记忆TPM | 来源:发表于2020-09-23 17:24 被阅读0次

    Flutter推出已经一段时间了,最近有时间,正好可以进行学习,使用,并计划最终嵌入目前项目中进行线上验证。

    都是个人的开发使用经验,不全面,但绝对能够派上用场跟解决问题。

    大致概念

    Flutter:一个可以跨平台(android和iOS)进行开发的工具。

    开发使用IDE:Android Studio (3.0以上版本),Visual Studio Code(1.20.1以上版本),或是文本工具。

    开发的第一步,就是配置开发环境,进行代码调试。

    本节结合自身,进行快速配置。

    若想完整学习的,可以查阅中文版的官方文档

    地址 https://flutterchina.club

    第一步:下载安装Xcode ,在App Store中下载最新版本的Xcode,进行安装。


    down_xcode@2x.png

    并创建一个应用,在模拟器上进行运行。

    run_xcode@2x.png

    第二步:下载安装 Android Studio。可以选择官网,也可以搜索国内安装方法,还有相应的AndroidSDK下载,耗时较长,因为android环境安装问题有时候较多,有时候需要翻墙,大家可以自行搜索Android 环境搭建。

    down_as@2x.png

    这里可以增加安装Genymotion。Android 开发比较适合的模拟器,大家也可以自行查找进行安装。

    down_genymotion@2x.png

    然后,进入AndroidStudio进行插件安装,如图

    set_as@2x.png

    第三步:Flutter系统环境配置

    首先随便找个目录,我是在放在了 /Users/johnson/Library/Developer/

    这个地址后面会用到。

    然后命令行

    cd /Users/johnson/Library/Developer/
    
    git clone [https://github.com/flutter/flutter.git](https://github.com/flutter/flutter.git)
    
    down_flutter@2x.png

    然后打开用户目录

    command+shift+. 快捷键,展示隐藏文件,在自己用户名下,找到文件 .bash_profile跟 .zshrc,如图

    base_set@2x.png

    设置 .bash_profile 文件,没有这个文件,可以进行新建。

    输入内容

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
    export PATH=/Users/johnson/Library/Developer/flutter/bin:$PATH
    
    export PATH=${PATH}:/Users/johnson/Library/Android/sdk/platform-tools
    
    export PATH=${PATH}:/Users/johnson/Library/Android/sdk/tools
    

    上面3个是flutter的配置,注意文件目录。

    下面2个是android sdk目录地址配置,根据你的实际情况。

    base_info@2x.png

    设置 .zshrc文件,没有这个文件,可以进行新建。

    输入内容

    source ~/.bash_profile
    
    zshrc_info@2x.png

    至此,所有环境配置的均已经完成。

    在Flutter git项目下,有个hello world文件夹,我们可以进行运行我们的第一个flutter程序。

    flutter_hello@2x.png

    我们先进行验证

    命令

    cd /Users/johnson/Library/Developer/flutter/examples/hello_world
    
    flutter doctor
    
    flutter_doctor@2x.png

    若有报错,问题,那么可以根据内容,查找相应的解决方案。

    若没有问题,接下来,进行

    flutter run

    flutter_run@2x.png

    我们的第一个flutter应用已经跑起来了,不过运行的是iOS的模拟器,如果把genymotion开启,选择android模拟器,也可以在android模拟器上运行。

    Android跟iOS端均已配置完毕,可以进行开发使用了。

    相关文章

      网友评论

          本文标题:MacOS系统-配置Flutter环境-0

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