Flutter中如何通过ThemeData的ColorScheme适配系统背景色

完全可以通过ThemeData中的ColorScheme来实现应用背景色跟随系统明暗模式变化，核心思路是利用Flutter自动切换明暗主题的机制，在light和dark主题的ColorScheme中分别配置对应背景色，让应用自动适配系统模式。

具体实现步骤： #

1. 配置明暗主题的ColorScheme
   在MaterialApp的theme（浅色主题）和darkTheme（深色主题）中，分别定义适配的ColorScheme。你可以利用ColorScheme.fromSeed快速生成符合Material Design规范的配色，也可以自定义背景色：

   MaterialApp(
     // 浅色主题配置
     theme: ThemeData(
       colorScheme: ColorScheme.fromSeed(
         seedColor: Colors.blue,
         // 自定义浅色背景色，不设置则使用默认浅色系
         background: Colors.grey[50],
       ),
       // 不单独设置scaffoldBackgroundColor，默认会使用colorScheme.background
     ),
     // 深色主题配置
     darkTheme: ThemeData(
       colorScheme: ColorScheme.fromSeed(
         seedColor: Colors.blue,
         brightness: Brightness.dark,
         // 自定义深色背景色，不设置则使用默认深色系
         background: Colors.grey[900],
       ),
     ),
     // 设置主题模式为跟随系统
     themeMode: ThemeMode.system,
     home: const HomePage(),
   )
   

2. 让组件使用ColorScheme中的背景色

   • 对于Scaffold，如果没有单独设置scaffoldBackgroundColor，会自动继承ThemeData.colorScheme.background，无需额外配置就能跟随系统变化。
   • 对于其他自定义组件（如Container），可以直接引用主题中的背景色：

     Container(
       color: Theme.of(context).colorScheme.background,
       // ...其他属性
     )
     

注意点： #

• 如果你想使用Material Design默认的适配背景色，不需要手动设置background参数，ColorScheme.fromSeed会根据brightness自动生成匹配的颜色，更符合设计规范。
• 确保themeMode设置为ThemeMode.system，应用才会监听系统的明暗模式切换并自动切换主题。

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