Mark’s blog

0%

Flutter笔记1-搭建开发环境

发表于 分类于 阅读次数： Valine：

在macOS上搭建flutter开发环境

获取flutter sdk

官网地址：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

github：https://github.com/flutter/flutter/releases

查看flutter SDK版本号：解压后 flutter/version

添加flutter到path中，’pwd’是解压后flutter的文件路径。

1
export PATH=`pwd`/flutter/bin:$PATH

export命令文件所在：

1
~/.bash_profile

至此，只能在当前路径下使用flutter命令

安装依赖

运行 flutter doctor 命令，查看是否需要安装其他依赖。根据提醒安装缺少的环境依赖。

例如：

1
2
3
4
5
6
7
8
9
10
11
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.2 19C57, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.3)
[!] IntelliJ IDEA Ultimate Edition (version 2019.2.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.42.1)
[!] Connected device
    ! No devices available

问题：

执行 flutter doctor 命令时，提示“无法打开“idevice_id”，因为无法验证开发者”。

去Mac的“系统偏好设置–>安全隐私–>通用–>允许idevice_id”，重新运行 flutter doctor 命令，弹窗会出现打开按钮。

全局可用flutter命令

  1. 获取flutter SDK路径，用在第2步中添加的路径。

  2. 不同系统文件目录可能会不相同，以 .bash_profile 为例。在 .bash_profile 文件中添加路径。

    1
    export PATH="$PATH:/Users/inspiry/Desktop/work/flutter/bin"

  3. 运行 source $HOME/.bash_profile 刷新命令行

  4. 使用 echo $PATH 命令查看SDK路径是否已添加

  5. 使用 which flutter 查找flutter，验证是否可用全局命令

至此，开发环境配置完成。

flutter其他命令

  1. 查看安装的flutter版本：flutter --version
  2. 查看线上flutter分支：flutter channel ，”stable”是稳定版分支，”master”是开发版分支
  3. 升级flutter sdk和依赖包：flutter upgrade
  4. flutter项目中获取项目的依赖包：flutter packages get
  5. flutter项目中升级项目依赖包的最新版：flutter packages upgrade

VS Code

VS Code配置

  1. 安装flutter插件，在Extension中搜索flutter插件，安装，重启VSCode
  2. 验证flutter，在命令面板 command + shift + p 中输入doctor，选择 Flutter: Run Flutter Doctor 运行。查看输出是否有问题。打印结果和命令行中doctor命令结果一致。

VS Code新建项目

  1. 命令面板运行 Flutter:New Project
  2. 输入项目名称，回车，选择项目存放目录

简单的两步便创建了一个flutter项目，项目所需代码在 lib/main.dart

运行项目

在vscode最下面的状态栏中选择模拟器，点击 运行 - 启动调试，demo会运行到模拟器中

flutter支持热重载，直接修改 lib/main.dart 中的代码，保存后即刻呈现在APP上。

问题：

  1. 找不到状态栏：查看 - 外观 - 勾选显示状态栏
  2. 提醒在flutter SDK中找不到Dart，要求在命令行中运行 flutter doctor 命令重试，运行命令则无反应。解决办法：在进程中找到 dart 关闭，重启vscode重试。

至此，开发环境搭建完成。

打赏作者一杯咖啡