Flutter中已废弃的background、onSurface属性替代方案咨询

Flutter适配Material 3设计系统后，ColorScheme中的background和onBackground属性已被废弃，官方提供了两种可行的替代方案来匹配原代码的界面效果：

方案一：替换为ColorScheme的surface/onSurface属性 #

这是官方推荐的Material 3适配方案，直接将原属性替换为对应的新属性即可，作用完全匹配：

import 'package:expensetracker/screens/home/views/home_screen.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Expense Tracker',
      theme: ThemeData(
        colorScheme: ColorScheme.light(
            surface: Colors.grey.shade100, // 替代原background
            onSurface: Colors.black, // 替代原onBackground
            primary: const Color(0xFF00B2E7),
            secondary: const Color(0xFFE064F7),
            tertiary: const Color(0xFFFF8D6C),
            outline: Colors.grey),
      ),
      home: const HomeScreen(),
    );
  }
}

方案二：直接设置Scaffold背景色（兼容Material 2/3） #

如果需要更精准控制页面基础背景，可在ThemeData中单独指定scaffoldBackgroundColor，同时保留其他配色配置：

import 'package:expensetracker/screens/home/views/home_screen.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Expense Tracker',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.grey.shade100, // 直接设置页面背景色
        colorScheme: ColorScheme.light(
            onSurface: Colors.black, // 背景上的文本/图标前景色
            primary: const Color(0xFF00B2E7),
            secondary: const Color(0xFFE064F7),
            tertiary: const Color(0xFFFF8D6C),
            outline: Colors.grey),
      ),
      home: const HomeScreen(),
    );
  }
}

补充说明 #

• surface对应Material 3中界面的基础表面背景，和原background功能完全一致；
• onSurface用于定义在surface背景上的可交互元素、文本的颜色，对应原onBackground；
• 若项目仍使用Material 2风格，方案二的设置方式可以直接匹配原效果，无需调整ColorScheme属性。

内容的提问来源于stack exchange，提问作者Shan Recaña