Flutter基础问题：配置Theme主题后AppBar颜色未生效如何解决？

以上是当前编写的代码及对应运行输出效果，按代码配置主题后界面颜色仍为蓝白配色，并未变为预期的灰色和黑色，AppBar颜色没有发生变化，请问该如何解决？

原始问题代码：

import 'package:flutter/material.dart';

void main() {
  runApp(RecipeApp());
}

class RecipeApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    final ThemeData theme = ThemeData();

    return MaterialApp(
      title: 'Recipe Calculator',
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(
          primary: Colors.grey,
          secondary: Colors.black,
        ),
      ),

      home: const MyHomePage(title: 'Recipe Calculator'),
    );
  }
}

问题原因 #

Flutter 3.0及以上版本默认启用Material 3设计规范，你当前使用的是Material 2的主题配置方式，参数不会被Material 3模式下的组件读取，因此主题修改不生效。

解决方法 #

方案1：关闭Material 3，沿用现有配置逻辑 #

在ThemeData中显式指定useMaterial3: false即可让原有配置正常生效，修改后代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(RecipeApp());
}

class RecipeApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // 显式关闭Material 3
    final ThemeData theme = ThemeData(useMaterial3: false);

    return MaterialApp(
      title: 'Recipe Calculator',
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(
          primary: Colors.grey,
          secondary: Colors.black,
        ),
      ),
      home: const MyHomePage(title: 'Recipe Calculator'),
    );
  }
}

方案2：适配Material 3规范配置主题 #

如果需要使用Material 3的新特性，调整对应配置参数即可：

• Material 3中AppBar默认背景色对应colorScheme.surface字段
• 也可以通过全局配置appBarTheme属性统一修改AppBar样式

适配后代码示例：

import 'package:flutter/material.dart';

void main() {
  runApp(RecipeApp());
}

class RecipeApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Recipe Calculator',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.grey,
          primary: Colors.grey,
          secondary: Colors.black,
        ),
        // 全局配置AppBar样式
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.grey,
          foregroundColor: Colors.black,
        ),
      ),
      home: const MyHomePage(title: 'Recipe Calculator'),
    );
  }
}

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