Flutter中如何仅为单个页面设置深色通知栏且状态栏图标为白色

不需要依赖第三方库，直接用Flutter SDK自带的SystemChrome类就能实现你的需求，配置后仅对当前页面生效，不会影响全局。

两种适配场景 #

场景1：页面包含AppBar #

直接在AppBar的配置项里指定状态栏样式即可，无需额外生命周期处理，页面销毁后会自动恢复原有样式：

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("目标页面"),
        // 状态栏配置
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.black, // 状态栏背景黑色
          statusBarIconBrightness: Brightness.light, // 安卓端状态栏图标白色
          statusBarBrightness: Brightness.dark, // iOS端状态栏图标白色
        ),
        // 配套AppBar本身的样式和上面配置对齐即可
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
      ),
      body: const SizedBox(),
    );
  }
}

场景2：页面无AppBar（全屏/自定义顶部栏） #

需要在页面生命周期中手动设置样式，离开页面时恢复原有样式：

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

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

  @override
  State<TargetPage> createState() => _TargetPageState();
}

class _TargetPageState extends State<TargetPage> {
  SystemUiOverlayStyle? _originalStyle;

  @override
  void initState() {
    super.initState();
    // 先保存进入页面前的原有状态栏样式
    _originalStyle = SystemChrome.latestStyle;
    // 设置当前页面的状态栏样式
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.black,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark,
    ));
  }

  @override
  void dispose() {
    // 页面销毁时恢复原有样式，不影响其他页面
    if (_originalStyle != null) {
      SystemChrome.setSystemUIOverlayStyle(_originalStyle!);
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SizedBox(),
    );
  }
}

第三方库不生效的原因 #

flutter_statusbarcolor已经停止维护多年，不兼容Flutter 3.0及以上版本，优先使用官方原生方案即可，不存在兼容问题也不会增加包体积。

内容的提问来源于stack exchange，提问作者salih suat kükrer