Flutter环境配置记录-Mac端

一线蓝光
245 阅读3分钟

前沿

话说配置flutter这个环境给我印象那是相当的深刻，踩了很多坑，感谢网上大量的资料，东拼西凑的完成了我的配置，在此记录下我的血泪史。

  1. 开发工具

    • 电脑：Mac 两端都可以开发

    • 工具：

      • VScode:前端开发方便，支持Flutter开发，无法调试安卓
      • Android Studio: 安卓开发必备，支持Flutter开发(官方推荐)

  2. 环境搭建

    • 硬件环境：MacOS(64-bit)、磁盘空间700MB(不包括Xcode或Android Studio的磁盘空间)、Flutter依赖工具(bash,mkdir,rm,git,curl,unzip,which)

    • Step1: 使用镜像(因为网络限制需要设置)

      // 添加到.bash_profile中 
$ open ~/.bash_profile
添加：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ source ~/.bash_profile

    注意：此镜像为临时镜像，并不能保证一直可用，参考详情Using Flutter in China以获得有关镜像服务器的最新动态

    • Step2: 配置Flutter SDK

      1. 前往官网获取SDK，官网地址
      2. 解压安装包到你想要安装的目录(这个目录以后不需要动，不建议放在deskTop)
      cd ~/development(你放置安装包的目录,把压缩包放置到这里)
unzip flutter_macos_1.22.4-stable.zip(解压缩)
      1. 添加flutter相关工具到path中(.bash_profile文件中添加配置)
      export PATH = `你存放flutter的路径`/flutter/bin:$PATH
      1. 如果你使用的终端是bash，配置结束。如果你和我一样，在某年某月的某一天，把终端改成了zsh，还需要在.zshrc中添加对应配置
        source $HOME/.bash_profile(也可以把.bash_profile中的配置添加过来)
      1. 运行flutter doctor

      这个命令会检查你当前的配置环境，并在命令行窗口中生成一份报告，安装Flutter会附带安装Dart SDK，不需要对Dart进行单独安装，报告中会向你描述如果执行这些命令来完成整体的配置过程。当安装了任一缺失部分的依赖后，可以再次运行flutter doctor命令确认是否安装成功。

    • Step3:开发环境安装

      1. 下载Xcode(可以去AppStore下载最新版本，也可以去这里下载其他版本)

      2. 安装cocopods环境(这个之前在配置RN环境时已经完成，此处略去细节)

    • step4:安装开发环境安装

      1. 下载Android Studio developer.android.google.cn/studio

      2. 设置安卓模拟器：启动Android Studio>Tools>Android>AVD Manager并选择Create Virtual Device

      3. Perferences > Plugins安装插件 Dart、Flutter，安装完成后重启

  3. 第一个flutter程序

    • 如果使用VSCode需要添加flutter和dart code两个插件，安装完成后重启编译器即可使用

    • 创建flutter项目

      • 方式一：命令行 flutter create flutter_demo

      • 方式二： Android Studio

        File> New Flutter Project

      • 方式三：VSCode

        1. View/Command Palette(快捷键Command+Shift+p)
        2. 输入flutter，然后选择Flutter:New Project

    • 如果成功，运行效果如下：

  4. 问题汇总

    如果你按照以上步骤，且一切运行正常，以下内容可以省略

    • 如果发现安卓模拟器用不了，可以查看是否进行了android-sdk的配置

      flutter config --android-sdk （Your androidSDK path）

    • 如果在Android Studio中ios模拟器不可用

    # 1. 尝试通过在命令行以下命令来配置配置Xcode command-line tools
$ sudo xcode-select --switch /Applications(你放置Xcode的文件夹)/Xcode.app/Contents/Developer
 $ sudo xcodebuild -runFirstLaunch

# 2. 如果还是不可用，尝试运行以下命令：(这是我的最终解决方案)
flutter precache

flutter命令行工具会下载不同平台的开发二进制文件，如果需要一个封闭式的构建环境，或在网络可用性不稳定的情况下使用等情况，可能需要这个命令预先下载iOS和Android的开发二进制i文件爱你。

在官方文档中当时这个步骤写的是可选操作，所以我当时没有执行，然而，最后因为执行了这个操作，我的问题便迎刃而解。。。。网上搜索了很多解决方案，最终还是要回归文档的，所以，一定要认真看文档呐。

  5. 完结

    仔细想来，其实整个配置过程并没有很复杂，最最重要的是要认真看文档！！！！认真看报错信息！！！！会节省很多时间。

    学一个新的东西，就像学习的它的游戏规则，规则懂了，自然玩的就顺畅了。

avatar
文章
阅读
粉丝