如何为Flutter应用的不同模块设置不同主题？

你的核心问题是：单一层Theme只能覆盖当前路由，子路由无法继承主题；嵌套MaterialApp又会导致导航栈隔离，无法返回根页面。下面给你一个简洁的解决方案，不用给每个页面传颜色参数，就能让整个模块的所有路由共享主题。

核心思路 #

给每个模块单独创建嵌套的Navigator，并将Theme作为这个Navigator的父组件。这样模块内的所有路由都在这个Navigator的上下文里，自然会继承外层的Theme样式，同时不会影响根MaterialApp的导航栈，返回逻辑完全正常。

修改后的完整代码 #

import 'package:flutter/material.dart';

main() {
  runApp(const MaterialApp(home: _Test()));
}

class _Test extends StatelessWidget {
  const _Test();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              child: const Text('Red section'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => _ModuleRoot(primaryColor: Colors.red),
                  ),
                );
              },
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              child: const Text('Green section'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => _ModuleRoot(primaryColor: Colors.green),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

// 模块根页面：用Theme包裹嵌套Navigator，统一管理模块内路由
class _ModuleRoot extends StatelessWidget {
  final Color primaryColor;

  const _ModuleRoot({required this.primaryColor});

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(colorScheme: ColorScheme.light(primary: primaryColor)),
      child: Navigator(
        initialRoute: '/',
        onGenerateRoute: (settings) {
          // 模块内所有路由都在这里生成，自动继承Theme
          return MaterialPageRoute(builder: (context) => _TestSubRoute());
        },
      ),
    );
  }
}

class _TestSubRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.primary.withOpacity(0.2),
      appBar: AppBar(
        title: const Text('Should keep the same color through the navigation...'),
        actions: [
          IconButton(
            icon: const Icon(Icons.help),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text('Hello'),
                    actions: [
                      TextButton(
                        child: const Text('OK'),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  );
                },
              );
            },
          ),
        ],
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Push...'),
          onPressed: () {
            // 直接用当前context导航，自动继承Theme
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => _TestSubRoute()),
            );
          },
        ),
      ),
    );
  }
}

关键说明 #

• _ModuleRoot作为每个模块的入口，用Theme统一配置颜色，内部嵌套的Navigator负责管理模块内的所有路由，确保所有子页面都能拿到正确的主题上下文。
• 模块内导航时，直接使用当前页面的context即可，因为这个context属于嵌套的Navigator，会自动继承外层的Theme。
• 返回逻辑完全正常：点击AppBar返回按钮会先退出模块内的子路由，直到模块路由为空，再返回根页面，不会出现嵌套MaterialApp的栈隔离问题。

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