美文网首页
Flutter学习(二)环境搭建

Flutter学习(二)环境搭建

作者: yanhooIT | 来源:发表于2020-03-24 21:27 被阅读0次

    内部团队学习,以简单直接为主

    操作系统选择

    • 一般需要使用Mac OS,因为我们需要针对iOS进行调试,通常方便起见还是选择Mac OS
    • 如果仅仅是为了学习可以使用Windows是没有任何问题,但是我自己使用的是MacBook Pro,所以接下来我还是以Mac OS系统为主

    安装Flutter SDK

    Mac OS环境变量配置

    • 在根目录下找到.bash_profile or .bashrc文件,在文件中配置环境变量如下
    # FlutterSDK路径(我把flutter放到了用户目录下)
    export FLUTTER_HOME=/Users/xxx/flutter
    # Flutter环境变量配置
    export PATH=$PATH:$FLUTTER_HOME/bin
    # Dart环境变量配置
    export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
    # 配置镜像
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    
    • 如果电脑上有.zshrc文件,记得在文件中添加source ~/.bash_profile or source ~/.bashrc命令
    • 配置完毕后,打开终端,执行source ~/.bash_profile or source ~/.bashrc命令,这一步需要注意每次改变.bash_profile or .bashrc文件后都要重启终端,然后执行source ~/.bash_profile or source ~/.bashrc命令
    • 执行完毕后执行flutter --version命令,如果能看到flutter版本,就说明配置成功了
    • 执行完毕后执行dart --version命令,如果能看到dart版本,就说明配置成功了
    • 如下图: 验证Flutter是否安装成功

    我遇到的问题

    • 问题描述:我学习Dart语法用的是VSCode这个开发工具,我装了Flutter、Dart、Code Runner这几个插件,但是我写完代码,运行代码时总是提示/bin/sh: dart: command not found,我在Flutter学习(二)环境搭建中已经做了环境变量的配置,但是VSCode一直提示/bin/sh: dart: command not found,我试了各种办法,前后浪费了我一个多小时,才得以把这个问题解决
    • 解决办法:首先你在.bash_profile or .bashrc文件里配置环境变量是没问题的,一般情况大部分人做了这一步就可以了,但是由于我的电脑安装了Oh My Zsh,还需要在.zshrc文件中添加source ~/.bash_profile or source ~/.bashrc命令,或者在这里配置同样的环境变量也行,至此问题解决
    • 扩展:可以用一下命令来进行检测你当前终端用的哪个版本的shell解析器
    # 当前系统装了哪些版本的shell
    cat /etc/shells 
    # 当前版本的shell解析器
    echo $SHELL
    # 切换bash(重启终端生效),对应~/.bashrc 配置文件
    chsh -s /bin/bash
    # 切换zsh(重启终端生效),对应~/.zshrc 配置文件
    chsh -s /bin/zsh
    

    配置iOS环境

    • 需要安装Xcode,可以在App Store里直接下载安装即可
    • 安装自己想要的Xcode的版本,需要手动下载
    • 选择自己的iOS模拟器
      • 第一步 第一步
      • 第二步 第二步

    配置Android环境

    • 安装Android Studio
    • Android的环境配置(这一步后期补充
    • 创建Android模拟器


      1
      2

    Flutter开发工具选择

    • 官方推荐两个工具来开发Flutter:Android StudioVSCode

    • 不管选择哪个工具都要安装Flutter和Dart插件,如下图

      • VSCode插件安装 VSCode插件安装
      • Android Studio插件安装,选择偏好 Android Studio插件安装
    • VSCode,个人理解算不上一个IDE

      • 非常的轻量级,不会占用你非常大的内存消耗,而且启动速度等都非常快
      • 可以在VSCode上安装各种各样的插件来满足自己的开发需求
      • 由于非常轻量级,所以会有些小缺点,如:代码提示不够灵敏,没有启动、热更新点击按钮等等
    • Android Studio没什么好说了,就是一个IDE,各种优点就不说了,唯一缺点就是重

    • 选择建议

      • Dart学习过程中使用VSCode
      • Flutter学习使用Android Studio

    创建Flutter项目

    • 可以先通过flutter doctor命令检查一下目前还缺啥配置
    • 指定目录,在终端中输入flutter create helloflutter命令,项目名称不支持驼峰,可以用下划线进行区分,这里可以叫hello_flutter
    • cd到项目目录,执行flutter run命令可以运行项目,如果当前连接不止一个设备,会列出设备信息,可以通过flutter run –d 模拟器id命令将项目运行在置顶设备上
    • 也可以用Android Studio直接打开项目,选择对应的设备点击运行即可

    相关文章

      网友评论

          本文标题:Flutter学习(二)环境搭建

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