Flutter页面切换时状态栏颜色恢复默认问题求助

我在Flutter应用中遇到一个问题：页面导航时状态栏颜色会恢复为默认颜色。已实现SystemUiOverlayFunc类来设置所需的系统UI覆盖样式，但问题仍未解决。

代码结构概述 #

main.dart配置 #

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';
import 'Screens/Homepage.dart';
import 'constantes/Colors.dart';
import 'constantes/SystemUiOverlayFunc.dart';

void main() {
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();
  uiOverlayFunc.systemUiOverlay();
  runApp(Main());
}

// ignore: use_key_in_widget_constructors
class Main extends StatelessWidget {
  final ColorFile colorFile = ColorFile();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        fontFamily: 'rabarBold',
      ),
      home: HomePage(),
    );
  }
}

首屏HomePage简化代码 #

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:bashakam_barawzanko/Screens/nmrakanm.dart';
import 'package:bashakam_barawzanko/constantes/Colors.dart';
import 'package:bashakam_barawzanko/constantes/systemUiOverlayFunc.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../components/card.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ColorFile colorFile = ColorFile();
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();

  @override
  void initState() {
    super.initState();
    uiOverlayFunc.systemUiOverlay();
  }
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: colorFile.kbodyColor,
        appBar: AppBar(
          backgroundColor: colorFile.kbodyColor,
          title: Center(
            child: Text(
              '🎓',
              style: TextStyle(
                fontSize: 18,
                color: colorFile.kWhiteTextColor,
              ),
            ),
          ),
          // 剩余代码省略
        ),
      ),
    );
  }
}

第二屏Nmrakanm代码 #

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:bashakam_barawzanko/constantes/Colors.dart';
import 'package:flutter/material.dart';
import '../constantes/SystemUiOverlayFunc.dart';

class Nmrakanm extends StatefulWidget {
  const Nmrakanm({super.key});

  @override
  State<Nmrakanm> createState() => _NmrakanmState();
}

class _NmrakanmState extends State<Nmrakanm> {
  ColorFile colorFile = ColorFile();
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();

  @override
  Widget build(BuildContext context) {
    uiOverlayFunc.systemUiOverlay();
    return Scaffold(
      backgroundColor: colorFile.kbodyColor,
      appBar: AppBar(
        iconTheme: IconThemeData(color: colorFile.kWhiteTextColor),
        backgroundColor: colorFile.kbodyColor,
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

SystemUiOverlayFunc类代码 #

import 'package:flutter/services.dart';
import 'package:bashakam_barawzanko/constantes/Colors.dart';

class SystemUiOverlayFunc {
  final ColorFile _colorFile = ColorFile();
  
  void systemUiOverlay() {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle.dark.copyWith(
        systemNavigationBarColor: _colorFile.kbodyColor,
        statusBarColor: _colorFile.kbodyColor,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
    );
  }
}

当前问题 #

在首屏的initState()方法和第二屏的build()方法中调用了systemUiOverlay()，但页面导航时状态栏颜色仍会恢复默认，切换页面时状态栏颜色有明显变化。

期望：通过SystemUiOverlayFunc类设置的系统UI样式能在页面导航时保持一致，维持应用视觉统一性。

解决方案 #

1. 全局配置状态栏样式（推荐） #

在MaterialApp的theme中统一配置appBarTheme，这样所有使用AppBar的页面会自动继承该样式，无需在每个页面单独调用：

class Main extends StatelessWidget {
  final ColorFile colorFile = ColorFile();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        fontFamily: 'rabarBold',
        appBarTheme: AppBarTheme(
          backgroundColor: colorFile.kbodyColor,
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: colorFile.kbodyColor,
            statusBarIconBrightness: Brightness.light,
            systemNavigationBarColor: colorFile.kbodyColor,
            systemNavigationBarIconBrightness: Brightness.light,
          ),
        ),
      ),
      home: HomePage(),
    );
  }
}

2. 优化页面内的调用时机 #

避免在build()方法中调用systemUiOverlay()（build会多次触发），将第二屏的调用移至initState()：

class _NmrakanmState extends State<Nmrakanm> {
  ColorFile colorFile = ColorFile();
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();

  @override
  void initState() {
    super.initState();
    uiOverlayFunc.systemUiOverlay();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: colorFile.kbodyColor,
      appBar: AppBar(
        iconTheme: IconThemeData(color: colorFile.kWhiteTextColor),
        backgroundColor: colorFile.kbodyColor,
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

3. 确保全局样式持久化 #

在main()函数中初始化绑定后设置样式，并启用边缘到边缘模式，防止系统重置样式：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemUiOverlayFunc uiOverlayFunc = SystemUiOverlayFunc();
  uiOverlayFunc.systemUiOverlay();
  // 启用边缘到边缘模式，确保样式不会被覆盖
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.edgeToEdge,
    overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]
  );
  runApp(Main());
}

4. 统一页面背景与状态栏颜色 #

确保所有页面的Scaffold.backgroundColor和AppBar.backgroundColor与状态栏颜色一致，避免导航时出现颜色断层。

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