为何Flutter的ThemeData未生效？AppBar样式与教程不符

你的问题出在Flutter默认启用了Material3设计规范，而教程使用的是旧版Material2的逻辑，两者的主题配置和组件默认样式有差异。以下是两种解决方式：

方式一：切换回Material2（和教程行为完全一致） #

在ThemeData中添加useMaterial3: false，就能让primarySwatch恢复Material2中的作用，同时AppBar会自动使用primarySwatch的颜色，标题也会默认居中：

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: const HomePage(), // 加const可优化性能
  theme: ThemeData(
    primarySwatch: Colors.yellow,
    useMaterial3: false, // 关键配置
  ),
);

方式二：适配Material3（推荐，符合最新设计规范） #

如果想使用新版Material3，需要调整主题配置，同时手动设置AppBar的标题对齐：

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: const HomePage(),
  theme: ThemeData(
    useMaterial3: true,
    // 用seedColor生成配色方案，替代primarySwatch
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.yellow),
    // 全局配置AppBar样式
    appBarTheme: const AppBarTheme(
      centerTitle: true, // 让标题居中
      // 可选：强制AppBar使用主色作为背景
      // backgroundColor: Colors.yellow,
    ),
  ),
);

也可以单独给当前页面的AppBar设置样式：

appBar: AppBar(
  title: const Text("TO DO"),
  elevation: 0,
  centerTitle: true, // 单独设置标题居中
  backgroundColor: Theme.of(context).colorScheme.primary, // 调用主题主色
),

补充说明 #

Material3是Flutter 3.10及以上版本的默认配置，它的组件样式、主题变量逻辑和Material2差异很大，这就是你和教程效果不一致的核心原因。如果完全跟着旧版教程学习，优先选择方式一，避免不必要的适配问题。

内容的提问来源于stack exchange，提问作者Quinn Dawson