美文网首页
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