📚 课程目录第1章课程介绍与环境搭建

第一章：课程介绍与环境搭建——从 Material 3 开始

大家好，我是你们这节课的带路人。咱们这门课叫《Material 3 组件交互：加密动画优化教程》，说白了就是教你如何在 Material 3 体系下，把加密相关的动画做得又快又稳。你想想看，现在用户越来越在意隐私，加密动画如果不能优雅地展示，体验上就输了。

这一章我们先不急着写代码，先把地基打牢。我会把 Material 3 的核心思路、开发环境怎么配、项目怎么初始化，掰开了讲清楚。

1.1 Material 3 到底是什么

Material 3（简称 M3）是 Google 在 2021 年推出的新一代设计语言。你可能会问：「之前不是有 Material 2 吗？我又得学一套新的？」嗯，确实有变化，但改得更聪明了。

我个人最欣赏 M3 的一点是它的「动态色彩」——能根据用户的壁纸颜色自动生成主题色。这样你的 App 看起来就像用户自己的东西，而不是冷冰冰的模板。另外 M3 的组件形状更圆润，交互反馈也更细腻。比如按钮按下去会有「膨胀」动画，而不是像 M2 那样只是变个色。

  关键区别速览：
  
    维度Material 2Material 3
色彩系统手动配置主色/辅色基于壁纸动态生成，支持 5 种色调
组件形状方形 + 2dp 圆角可变的「形状令牌」，支持全圆角
动画理念弹幕式补间「响应式动作」——强调状态迁移的平滑性
加密动画支持需额外库内置 AnimatedContainer 配合 Cryptography 可用更自然的贝塞尔曲线

维度	Material 2	Material 3
色彩系统	手动配置主色/辅色	基于壁纸动态生成，支持 5 种色调
组件形状	方形 + 2dp 圆角	可变的「形状令牌」，支持全圆角
动画理念	弹幕式补间	「响应式动作」——强调状态迁移的平滑性
加密动画支持	需额外库	内置 AnimatedContainer 配合 Cryptography 可用更自然的贝塞尔曲线

为什么我们选 M3 做加密动画？因为 M3 的动画曲线（比如「强调加速」「标准减速」）天然适合模拟加密过程的「确认」「生成」「等待」状态。我在做支付 App 的时候试过用 M2 做指纹验证动画，总感觉生硬。换成 M3 之后，用户反馈说「等待的时候都不焦虑了」。——当然这是个玩笑，但体验确实上去了。

1.2 开发环境配置（含避坑指南）

环境配不好，后面全是泪。我当时第一次接触 Flutter 3 的时候，愣是因为 JDK 版本不对，卡了一整个下午。咱们直接上干货。

你需要准备什么

操作系统：Windows 10/11、macOS 12+ 或 Linux (Ubuntu 20.04+)
IDE：Android Studio Arctic Fox 以上或 VS Code + Flutter 插件（我用的是 Android Studio，调试方便）
Flutter SDK：3.10 或更高版本（M3 完整支持需要 Flutter 3.7+，但 3.10 更稳）
JDK：11 或 17（注意！Flutter 3 不再支持 JDK 8，我当初踩的坑就是这个）
设备或模拟器：Android 12+ 或 iOS 15+（M3 动态色彩需要 Android 12+）

我的小习惯：装完 Flutter 后，先跑 flutter doctor 检查所有勾是否打上。如果出现「Android toolchain」问题，八成是 Java 版本或 Android SDK 路径没配好。别慌，按提示走就行。

一步步来

安装 Flutter SDK：去官网下载最新稳定版，解压到 C:\src\flutter（Windows）或 /Users/xxx/flutter（macOS）。
配置环境变量：把 flutter/bin 加到 PATH 里。macOS 用户记得在 .zshrc 里加一行：
```
export PATH="$PATH:$HOME/flutter/bin"
```
安装 Android Studio：建议选带「Android Virtual Device」的版本。安装完后启动，进 SDK Manager 勾选 Android 12.0 (API 31) 以上。
设置 Java 版本：如果电脑上同时有 Java 8 和 11，记得把 JAVA_HOME 指向 11。我用 sdkman 管理的，很方便。

曾经我犯过的错： 直接用了系统默认的 Java 8，结果 flutter build appbundle 报错说「Unsupported class file major version」。解决方案很简单：装 JDK 11，然后在 Android Studio 的 File → Project Structure → SDK Location 里手动指定 JDK 路径。搞定。

1.3 项目初始化——从空白到第一个 M3 页面

现在环境有了，我们来新建一个专门为加密动画准备的项目。

使用命令行创建

flutter create --org com.yourcompany crypto_animation_tutorial
cd crypto_animation_tutorial

这里的 --org 参数是包名的反向域名，我习惯写自己公司的域名。项目名用下划线分隔。

切换 Material 3 主题

默认 Flutter 项目还是 M2 的。你需要手动开启 M3。打开 main.dart，找到 MaterialApp，加上一行 useMaterial3: true：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '加密动画教程',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue, // M3 动态色彩种子色
        useMaterial3: true,            // 开启 M3
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('M3 加密动画实验场')),
      body: const Center(
        child: Text('环境搭建成功！'),
      ),
    );
  }
}

注意 colorSchemeSeed 这个参数。你提供一个颜色，M3 会自动生成一套包含 5 个色阶的色板。想验证的话，可以运行项目看看 AppBar 的颜色是不是比 M2 更柔和。

加入加密动画所需的依赖

咱们后面会用到 pointycastle 来做加密演示，还有 flutter_animate 来增强动画控制。先加到 pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  pointycastle: ^3.7.3
  flutter_animate: ^4.2.0

然后 flutter pub get 拉下来。

温馨提示：依赖版本别追新。我习惯用 ^ 指定大版本，防止小升级带来 breaking change。曾经踩过 flutter_animate 从 4.0 升到 4.1 后，某些 easing 函数改名了，重构了半小时。所以稳定为先。

1.4 本章知识总览

下面这张图帮你把第一章的要点串起来，理解各个部分的关系。

1.5 验证环境——跑起来看看

配置完成后，在终端执行 flutter run。第一次运行会下载一些编译工具。等模拟器里出现 "环境搭建成功！" 的文字，说明你走完了所有流程。

如果你是用 Android 12+ 模拟器，注意观察状态栏颜色是不是变成了你种子色的派生色。如果没变，检查一下 useMaterial3 是不是 true，另外 ThemeData 里不要同时设置 primarySwatch（那是 M2 的参数，会和 M3 冲突）。

  常见问题排查：
  「Package not found」—— 检查 pubspec.yaml 缩进是否正确，YAML 对空格敏感
「Error: No such file or directory」—— 检查 Flutter SDK 路径是否包含空格，建议用短路径
「Android license status unknown」—— 运行 flutter doctor --android-licenses 同意协议

好了，第一章的架子已经搭好。你手里现在有了一个可以跑 M3 的项目，并且装了加密和动画的依赖包。接下来我们可以真正动手去实现加密动画的各种交互效果了。