Flutter应用切换主题时状态栏与导航栏同步更新问题求助

问题根源 #

你当前用AnnotatedRegion在MaterialApp中配置状态栏样式，但Navigator.pushReplacement跳转后，新页面的路由层级会覆盖MaterialApp层的AnnotatedRegion，导致主题更新时无法触发新页面区域的样式重建。

方案一：全局主题管理+SystemChrome直接控制（推荐） #

通过主题状态管理类统一处理主题切换与系统UI样式更新，无需依赖AnnotatedRegion的层级限制，所有页面都会同步生效。

1. 实现主题状态管理类

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class ThemeProvider extends ChangeNotifier {
  ThemeMode _currentMode = ThemeMode.light;

  ThemeMode get currentMode => _currentMode;

  // 切换主题并同步更新系统UI
  void toggleTheme() {
    _currentMode = _currentMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    _updateSystemOverlayStyle();
    notifyListeners();
  }

  // 根据当前主题配置系统UI样式
  void _updateSystemOverlayStyle() {
    final isDark = _currentMode == ThemeMode.dark;
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: isDark ? Colors.black : Colors.white,
      statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
      navigationBarColor: isDark ? Colors.black : Colors.white,
      navigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
      // 可根据你的自定义主题调整更多属性，比如statusBarBrightness
    ));
  }

  // 初始化时设置初始样式
  void init() {
    _updateSystemOverlayStyle();
  }
}

2. 在全局注入主题管理

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final themeProvider = ThemeProvider();
  themeProvider.init();
  
  runApp(ChangeNotifierProvider(
    create: (_) => themeProvider,
    child: const MyApp(),
  ));
}

3. 配置MaterialApp关联主题

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

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return MaterialApp(
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      themeMode: themeProvider.currentMode,
      home: const HomeScreen(),
    );
  }
}

4. 页面中切换主题的调用

无论在首页还是NotificationsScreen，只需调用：

// 注意listen: false避免不必要的重建
Provider.of<ThemeProvider>(context, listen: false).toggleTheme();

方案二：通用页面包装器（兼容AnnotatedRegion场景） #

如果需要保留AnnotatedRegion的使用方式，可创建通用页面包装组件，确保每个路由页面都能响应主题变化：

class ThemedPageWrapper extends StatelessWidget {
  final Widget child;
  const ThemedPageWrapper({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;
    
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: isDark ? Colors.black : Colors.white,
        statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
        navigationBarColor: isDark ? Colors.black : Colors.white,
        navigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
      ),
      child: child,
    );
  }
}

然后每个页面都用该组件包裹：

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

  @override
  Widget build(BuildContext context) {
    return ThemedPageWrapper(
      child: Scaffold(
        appBar: AppBar(title: const Text('通知')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
            },
            child: const Text('切换主题'),
          ),
        ),
      ),
    );
  }
}

方案对比 #

• 方案一：无需修改每个页面，全局统一控制，代码维护成本低，是最优选择。
• 方案二：需要给所有页面添加包装，适合必须使用AnnotatedRegion的场景（比如页面级自定义UI样式）。

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