Flutter中ThemeData配置的PrimaryColor不生效问题求助

嘿，我刚碰到过一模一样的问题！这是因为在较新的Flutter版本里，primaryColor已经不再是控制AppBar这类核心组件主色调的默认属性了，现在Material Design的颜色系统更依赖ColorScheme来统一管理配色。

问题原因 #

默认情况下，AppBar的背景色会读取ThemeData.colorScheme.primary的值，而不是旧版的primaryColor。你单独设置primaryColor后，组件并没有去引用这个值，所以还是显示默认的蓝色。

解决方案 #

这里有两种靠谱的解决方式：

方案1：通过ColorScheme设置主色（推荐）

这是符合当前Flutter设计规范的做法，能统一整个应用的配色系统：

import 'package:flutter/material.dart';
void main() => runApp(const GHFlutterApp());
class GHFlutterApp extends StatelessWidget {
  const GHFlutterApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GHFlutter',
      theme: ThemeData(
        // 使用ColorScheme指定主色
        colorScheme: ColorScheme.light(primary: Colors.green.shade800),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GHFlutter'),
        ),
        body: const Center(
          child: Text('GHFlutter'),
        ),
      ),
    );
  }
}

如果想要基于某个色板生成完整的配套配色，也可以用ColorScheme.fromSwatch：

theme: ThemeData(
  colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.green)
      .copyWith(primary: Colors.green.shade800),
),

方案2：强制让AppBar使用primaryColor

如果你更习惯用primaryColor的写法，可以直接给AppBar指定背景色为Theme.of(context).primaryColor：

appBar: AppBar(
  backgroundColor: Theme.of(context).primaryColor,
  title: const Text('GHFlutter'),
),

这样修改后，你的AppBar就会显示你想要的深绿色啦！

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