FLutter 工程从 0 到 1

1. 国内使用 Flutter(windows 环境为例)

1.1. 使用国内镜像下载(flutter_windows_v1.12.13+hotfix.9-stable.zip 为例)

源下载链接

https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.12.13+hotfix.9-stable.zip

镜像下载链接

https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_v1.12.13+hotfix.9-stable.zip

1.2. 下载完成后解压, 配置 Path 环境变量

path = flutter安装路径\bin; ...

1.3. 新增环境变量

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1.4. 配置 flutter.gradle

Flutter安装目录/packages/flutter_tools/gradle/flutter.gradle

    repositories {
        // google()
        // jcenter()

        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }      
    }

2. 运行 flutter doctor

C:\src\flutter>flutter doctor

运行结果示例

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

检测运行环境, 依据提示信息处理具体问题

3. Android 设置

参考 flutter.dev/docs/get-st…

4. 设置编辑器 (以 VS Code 为例)

安装 Flutter 及 Dart 插件

在插件窗口直接搜索 Flutter, 安装即可, 会同时安装所需的 Dart 插件

通过 Flutter Doctor 验证设置

Ctrl + Shift + P 调出命令面板, 输入flutter, 选择Flutter: Run Flutter Doctor, 在输出面板查看问题

5. 创建应用

1. Ctrl + Shift + P 调出命令面板, 输入flutter, 选择Flutter: New Project
2. 输入工程名, 选择工程所在目录
3. 等待工程目录生成完成

6. 运行应用

1. 查看右下角 状态面板
2. 点击 No Device, 弹出设备选择框, 选择一个设备或者模拟器
3. 选择左侧窗口 Run 菜单, 点击 Run and Debug按钮
4. 首次点击, 显示 没有配置, 点击右侧 设置按钮, 选择Flutter, 等待应用启动
5. 应用启动过程中, 信息会在调试控制台打印输出
6. 启动成功后显示如图

7. 尝试 hot reload

1. 打开 lib 目录下 main.dart文件
2. 更新

   You have pushed the button this many times:
   

   为

   You have clicked the button this many times:
   

无需重启应用

3. 保存更改(Ctrl + Shift + S 或者点击 hot reload)
4. 可以马上看到应用上的文字更新