1 环境搭建

虚拟机下Win10企业版(Win10-1909-Business-Editions-DVD-x64)、Chrome。
下载安装Flutter依赖的命令行工具Git For Windows：Git-2.37.1-64-bit.exe。
Flutter SDK下载：Flutter-Windows-3.0.5-Stable.zip。
- 解压到指定位置，找到文件夹中的flutter_console.bat文件，双击运行。
- 注意：不要将Flutter SDK安装到高权限路径下，例如C盘路径(系统盘)。
添加环境变量：控制面板—>用户账户—>更改我的环境变量—>环境变量。
- 新建变量名PUB_HOSTED_URL：变量值https://pub.flutter-io.cn/。
- 新建变量名FLUTTER_STORAGE_BASE_URL：变量值https://storage.flutter-io.cn/。
- 在变量Path中添加：变量值C:\Program\Flutter\bin(Flutter SDK安装路径的bin目录)。

2 编辑器的安装

安装Visual Studio：VisualStudioSetup.exe，使用C++的桌面工具。
- 勾选用于Windows的C++ CMake工具。
- 勾选Windows 10 SDK(10.0.19041.0)。
- 勾选MSVC v143-VS 2022 C++ x64/86生成工具(最新)。
安装Android Studio：Android-Studio-2021.2.1.15-Windows.exe，可能需要使用梯子。
- 添加环境变量ANDROID_SDK_HOME：变量值C:\Program\Avd (即模拟器存放的位置)。
- 设置Android模拟器：虚拟机貌似无法启动模拟器，建议将环境搭建在Pc主机上操作。
  - Android Studio—>More Actions—>Virtual Device Manager—>Create device。
  - Phone·Pixel—>Next—>镜像 R—>Download—>Next—>验证配置—>Finish。
- 安装插件：Android Studio—>Plugins—>Marketplace—>搜Flutter和Dart—>Install。
  - Flutter插件：支持Flutter开发工作流(运行、调试、热重载等)。
  - Dart插件：提供代码分析(输入代码时进行验证、代码补全等)。

3 flutter doctor

文件夹下鼠标右键Git Bash Here，命令窗口模式输入flutter doctor进行查看。
cmdline-tools component is missing：Android Studio缺少cmdline-tools工具。
- 启动Android Studio—>More Actions—>SDK Manager—>SDK Tools。
- Android SDK Command-line Tools (latest)—>Apply—>Finish—>OK。
Android license status unknown.：说明该环境需要添加Android license。
- 搜索cmd，以管理员身份运行，命令窗口下执行flutter doctor --android-licenses。
- 在提示是否接受许可时，输入y进行回车确认，最后重新输入flutter doctor进行查看。

$ flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn/. 
Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter 
    (Channel stable, 3.0.5, on Microsoft Windows [版本 10.xxx], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows
      # android-setup for more details.
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.3.0)
[√] Android Studio (version 2021.2)
[√] Connected device (2 available)
[√] HTTP Host Availability

! Doctor found issues in 1 categories.

4 首次创建项目

首次创建项目
- 启动Android Studio—>New Flutter Project—>Flutter—>Flutter SDK path。
- Flutter SDK path即Flutter SDK的安装路径—>Next—>Project Name项目命名。
- 将Project Name命名为myflutter(即Organization包名)—>Finish—>Create。
在该项目上运行程序：File—>Open—>定位到该项目的Android目录—>选中—>OK—>将其打开。
Sync project with Gradle Files下载：项目打开Android目录时自动下载(位于Android Studio->File中)。
No Device Selected：找不到运行设备，两调试方式(命令窗口下flutter devices检测当前可用设备)。
- Android真机调试
  - 手机使用USB数据线连接电脑，开启调试模式，Android Studio安装与手机对应的SDK版本。
  - Android Studio—>Tools—>SDK Manager—>SDK Platforms—>勾选对应版本SDK—>OK。
  - 当No Device Selected变为对应手机型号名称时，Run—>Run‘app’即可在手机中运行程序。
- 模拟器调试：Android Studio—>Tools—>Device Manager—>启动之前设置好的Android模拟器。
多台设备同时兼容性调试，命令窗口进入对应项目myflutter中，输入flutter run -d all执行程序。
改完代码之后，不需要重新输入命令执行程序，以下通用快捷键可帮助日常开发。
- 使用热加载Shift + R或r，重新加载程序。
- 若热加载没生效，则使用命令R进行热重启。
- 命令p显示网格，可以很好地掌握布局情况。
- 命令o支持切换Android以及iOS的预览模式。
- 命令q退出调试预览模式，相当于Ctrl + C。

5 项目简单介绍

创建Flutter项目的两种方式
- Android Studio(正式项目建议使用编辑器来创建)。
- 通过命令flutter create <project-name>创建。
目录结构
- test：用于存放测试代码。
- android、ios、web、windows等：各个平台的资源文件。
- lib：flutter相关代码，开发的所有代码都放在该目录下。
- pubspec.yaml：存放项目第三方依赖、版本号和配置信息等。
- analysis_options.yaml：分析Dart语法的文件，老项目升级新项目时若有警告信息，可删除此文件。

5-1 入口方法

// 引入material主题
import 'package:flutter/material.dart';

// 入口方法
void main() {
  // Center组件，让内容居中
  runApp(
    const Center(
      // 查看底层代码使用“Ctrl+鼠标左键”
      child: Text(
        'Hello Flutter!',
        // ltr从右向左
        textDirection: TextDirection.ltr,
        // 改变文本样式
        style: TextStyle(
          // color: Colors.red,
          color: Color.fromRGBO(80, 120, 35, 1),
          fontSize: 27,
        ),
      ),
    ),
  );
}

5-2 必须组件

开发中必须使用的装饰组件：MaterialApp(一般作为顶层Widget使用)、Scaffold(布局结构的基本实现)。
MaterialApp组件的常用属性：home(主页)、title(标题)、color(颜色)、theme(主题)、routes(路由)等。
Scaffold组件的常用属性
- appBar：显示在界面顶部的标题栏。
- body：当前界面所显示的主要内容。
- drawer：抽屉菜单控件，例如左拉、右拉、弹出对话框等。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('必须组件')),
        body: const Center(
          child: Text(
            'Hello Flutter!',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              color: Colors.red,
              // color: Color.fromRGBO(80, 120, 35, 1),
              fontSize: 27,
            ),
          ),
        ),
      ),
    ),
  );
}

5-3 内容抽离

Flutter自定义组件即一个类，需集成StatelessWidget或StatefulWidget。
StatelessWidget是无状态组件，状态不可变的Widget，前期接触比较多。
StatefulWidget是有状态组件，持有的状态可能在Widget生命周期中改变。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('内容抽离')),
        // 调用MyApp组件
        body: const MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  // 常量构造函数
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Flutter自定义组件',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          // color: Colors.red,
          color: Color.fromRGBO(80, 120, 35, 1),
          fontSize: 27,
        ),
      ),
    );
  }
}