一、开发环境搭建

Windows环境配置

  1. 首先设置两个环境变量
  1. setx PUB_HOSTED_URL https://pub.flutter-io.cn
  2. setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
  1. 点击下载 最新可用的 flutter 安装包, 或者克隆Flutter代码仓库： ```bash git clone —depth=1 https://github.com/flutter/flutter.git -b stable

or 换源拉取

git clone —depth=1 https://hub.fastgit.org/flutter/flutter.git -b stable

  2. 3. 下载完成后，解压并将 bin 目录添加到 PATH 环境变量
  4. <a name="8Hx9H"></a>
  5. ## 二、换源
  6. 官方提供的国内镜像
  7. ```bash
  8. export PUB_HOSTED_URL=https://pub.flutter-io.cn
  9. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

上海交大镜像

  1. export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
  2. export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn/

清华镜像

  1. export PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub"
  2. export FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter"

相关的镜像站点如下：

三、创建项目

使用以下命令创建项目：

  1. flutter create flutterTest

项目名称只能有小写字母及下划线

四、运行项目

运行前先检查是否有可用的模拟器：

  1. $ flutter devices
  2. 1 connected device:
  4. M2004J7AC (mobile) • on7hd64lhunzvwl7 • android-arm64 • Android 10 (API 29)

显示以上的信息说明有可用的设备。

使用以下命令运行项目：

  1. flutter run
  2. flutter run --trace-startup --profile # 统计应用启动时间

注意以下热更新的提示：

  1. To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
  2. For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

热更新输入 r，热重启输入 R。
001.png

五、开发工具

使用VSCode开发与调试

  1. 在 VSCode 中安装 Dart 和 Flutter 插件

image.png
image.png

  1. 按 F5 键或调用 Debug>Start Debugging 运行调试

002.png

  1. 变更 lib/main.dart 文件，将可以看到热更新效果

使用Android Studio开发与调试

  1. 安装 Flutter 和 Dart 插件

image.png

  1. 创建Flutter项目

image.png
image.png

  1. 可以看到工具栏有相关的调试选项

image.png

六、问题检测

如果不能够正常运行, 可以通过以下命令检测问题：

  1. $ flutter doctor --verbose
  2. [√] Flutter (Channel stable, v1.7.8+hotfix.4, on Microsoft Windows [Version 10.0.17134.950], locale zh-CN)
  3.     • Flutter version 1.7.8+hotfix.4 at D:\Software\flutter
  4.     • Framework revision 20e59316b8 (5 weeks ago), 2019-07-18 20:04:33 -0700
  5.     • Engine revision fee001c93f
  6.     • Dart version 2.4.0
  8. [√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
  9.     • Android SDK at D:/Software/android-sdk
  10.     • Android NDK location not configured (optional; useful for native profiling support)
  11.     • Platform android-Q, build-tools 28.0.3
  12.     • ANDROID_HOME = D:/Software/android-sdk
  13.     • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
  14.     • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
  15.     • All Android licenses accepted.
  17. [√] Android Studio (version 3.4)
  18.     • Android Studio at C:\Program Files\Android\Android Studio
  19.     • Flutter plugin version 38.1.1
  20.     • Dart plugin version 183.6270
  21.     • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
  23. [√] IntelliJ IDEA Ultimate Edition (version 2018.3)
  24.     • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2018.3.4
  25.     • Flutter plugin version 38.1.1
  26.     • Dart plugin version 183.6270
  28. [√] VS Code (version 1.37.1)
  29.     • VS Code at C:\Users\quanzaiyu\AppData\Local\Programs\Microsoft VS Code
  30.     • Flutter extension version 3.3.0
  32. [√] Connected device (1 available)
  33.     • Android SDK built for x86 • emulator-5554 • android-x86 • Android 7.0 (API 24) (emulator)
  35. • No issues found!

有的时候，通过此命令运行，会看到以下警告，但自己的Android Studio明明已经安装好了相关插件，这时就不用理他了，能正常使用。
image.png

七、调试技巧

debugger

  1. import 'dart:developer';
  2. debugger();
  4. // 带条件调试
  5. void someFunction(double offset) {
  6.   debugger(when: offset > 30.0);
  7.   // ...
  8. }

print

  1. print()
  2. debugPrint()

Dart DevTools

在 Android Studio 的 Run 中可以看到:
打开后可以在浏览器看到：
003.png

Dart DevTools
001.png

Dart VM Observatory
002.png

其他调试相关的命令

  1. flutter analyze # 代码分析
  2. flutter logs # 查看控制台输出的日志