Flutter中Theme组件设置textTheme属性对SnackBarAction不生效问题

问题原因 #

1. SnackBar的渲染宿主是ScaffoldMessenger，它默认在MaterialApp层级初始化，展示SnackBar时使用的是根级BuildContext，而非你局部Theme组件所在子树的context。
2. 你给FloatingActionButton包裹的Theme组件，作用域仅覆盖它的子树，SnackBar并不属于这个子树，自然读取不到局部设置的textTheme配置。而配置放到MaterialApp的Theme中时是全局生效的，ScaffoldMessenger可以正常读取，因此样式生效。

解决方案 #

方法1：直接给SnackBarAction指定样式（最推荐，无上下文依赖）

直接在构造SnackBarAction时传入textStyle参数，不需要依赖Theme继承：

SnackBarAction(
  label: 'Dismiss',
  onPressed: () {},
  textStyle: TextStyle(fontSize: 30),
)

方法2：给当前页面的ScaffoldMessenger嵌套Theme

如果需要当前页面所有SnackBar的Action样式统一，可把ScaffoldMessenger放到局部Theme的子树中：

@override
Widget build(BuildContext context) {
  return Theme(
    data: Theme.of(context).copyWith(
      textTheme: TextTheme(button: TextStyle(fontSize: 30)),
      primaryColor: Colors.orange,
    ),
    child: ScaffoldMessenger(
      child: Scaffold(
        floatingActionButton: Builder(builder: (builderContext) {
          return FloatingActionButton(
            onPressed: () {
              final snackBar = SnackBar(
                content: Text('SnackBar'),
                action: SnackBarAction(
                  label: 'Dismiss',
                  onPressed: () {},
                ),
              );
              ScaffoldMessenger.of(builderContext).showSnackBar(snackBar);
            },
            child: Icon(
              Icons.slideshow,
              color: Theme.of(builderContext).primaryColor,
            ),
          );
        }),
      ),
    ),
  );
}

方法3：展示SnackBar时动态包裹Theme

如果仅需要个别SnackBar应用局部样式，可以直接把SnackBar用Theme包裹：

final snackBar = Theme(
  data: Theme.of(context).copyWith(
    textTheme: TextTheme(button: TextStyle(fontSize: 30)),
  ),
  child: SnackBar(
    content: Text('SnackBar'),
    action: SnackBarAction(
      label: 'Dismiss',
      onPressed: () {},
    ),
  ),
);

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