如何在Flutter中局部覆盖Scaffold背景色或默认文本大小？

问题原因分析 #

1. scaffoldBackgroundColor不生效：这个属性是作用于Scaffold组件本身的，你把Theme组件嵌套在Scaffold内部的子节点上，Scaffold只会读取上层MaterialApp传入的orangeBrown主题配置，不会识别内部子节点的Theme。

2. 文本大小不生效：Text组件默认会从父级的DefaultTextStyle继承样式，而这个DefaultTextStyle是由Scaffold基于MaterialApp的主题生成的。你用Theme包裹Text后，没有显式让Text使用该Theme内的textTheme，所以依然沿用了外层的小字号配置。

解决代码示例 #

1. 正确修改Scaffold背景色 #

如果要给当前Scaffold设置蓝色背景，有两种可行方式：

// 方式一：直接给Scaffold指定backgroundColor属性
home: Scaffold(
  backgroundColor: Colors.blue,
  body: ...
)

// 方式二：用Theme包裹整个Scaffold
home: Theme(
  data: bluePink,
  child: Scaffold(
    body: ...
  ),
)

2. 让Text使用局部主题的文本大小 #

需要显式让Text读取包裹它的Theme中的样式，两种实现方式：

// 方式一：通过Builder获取上下文，显式指定style
child: Theme(
  data: bluePink,
  child: Builder(builder: (context) {
    return Text('现在字号变大了！', style: Theme.of(context).textTheme.bodyText2);
  }),
),

// 方式二：用DefaultTextStyle传递主题样式
child: Theme(
  data: bluePink,
  child: DefaultTextStyle(
    style: bluePink.textTheme.bodyText2!,
    child: Text('现在字号变大了！'),
  ),
),

完整修改后的代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

const smallDefault = TextTheme(bodyText2: TextStyle(fontSize: 15.0));
const bigDefault = TextTheme(bodyText2: TextStyle(fontSize: 54.0));
var orangeBrown = ThemeData(
  scaffoldBackgroundColor: Colors.brown,
  textTheme: smallDefault,
  accentColor: Colors.orange,
);
var bluePink = ThemeData(
  scaffoldBackgroundColor: Colors.blue,
  textTheme: bigDefault,
  accentColor: Colors.pink,
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Primary Text theme override',
      theme: orangeBrown,
      home: Theme(
        data: bluePink,
        child: Scaffold(
          body: Center(
            child: Theme(
              data: bluePink,
              child: Builder(builder: (context) {
                return Text('现在字号变大了！', style: Theme.of(context).textTheme.bodyText2);
              }),
            ),
          ),
          floatingActionButton: Theme(
            data: bluePink,
            child: FloatingActionButton(
              onPressed: () {},
              child: const Icon(Icons.add),
            ),
          ),
        ),
      ),
    );
  }
}

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