0%

Flutter笔记1-搭建开发环境

在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. 不同系统文件目录可能会不相同,以 .bashrc 为例。在 .bashrc 文件中添加路径。

    1
    export PATH="$PATH:/Users/inspiry/Desktop/work/flutter/bin"
  3. 运行 source $HOME/.bash_profile 刷新命令行

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

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

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

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重试。

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

打赏作者一杯咖啡