Flutter主题未应用到新页面，如何按触发按钮为详情页设置独立主题

实现核心逻辑 #

Flutter的Theme组件仅对其内部子树生效，我们无需修改MaterialApp的全局主题配置，只需给详情页单独包裹一层Theme组件，传入对应按钮的主题色即可。

修改步骤 #

1. 为DetailScreen新增必填的materialColor参数，用于接收跳转源按钮的主题色
2. 在DetailScreen的build方法中，先用Theme组件包裹页面根组件，基于全局主题拷贝修改出对应颜色的自定义主题
3. 在ThemedButton的点击跳转逻辑中，将当前按钮的materialColor传递给DetailScreen

完整可运行代码 #

import 'package:flutter/material.dart';

main() => runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: const HomeScreen(),
        theme: ThemeData(
          primaryColor: Colors.orange,
          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.orange),
        ),
      );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Wrap(
          spacing: 20,
          direction: Axis.vertical,
          children: const [
            ThemedButton(
              materialColor: Colors.red,
            ),
            ThemedButton(
              materialColor: Colors.green,
            ),
            ThemedButton(
              materialColor: Colors.brown,
            ),
          ],
        ),
      ),
    );
  }
}

class ThemedButton extends StatelessWidget {
  final MaterialColor materialColor;

  const ThemedButton({
    Key? key,
    required this.materialColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final customTheme = Theme.of(context).copyWith(
      primaryColor: materialColor,
      colorScheme: ColorScheme.fromSwatch(primarySwatch: materialColor),
    );
    return Theme(
      data: customTheme,
      child: ElevatedButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailScreen(materialColor: materialColor),
            ),
          );
        },
        child: const Text('Go to Detail Screen'),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final MaterialColor materialColor;
  const DetailScreen({Key? key, required this.materialColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      // 基于全局主题仅修改颜色配置，其他主题属性保持和全局一致
      data: Theme.of(context).copyWith(
        primaryColor: materialColor,
        colorScheme: ColorScheme.fromSwatch(primarySwatch: materialColor),
      ),
      child: Scaffold(
        appBar: AppBar(),
        // 详情页其他内容也会自动应用当前自定义主题
      ),
    );
  }
}

效果说明 #

• 点击不同颜色的按钮，打开的详情页AppBar、内置组件都会自动匹配对应按钮的主题色
• 全局主题配置未做任何修改，其他页面仍会使用默认的橙色主题

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