Flutter中AppBar透明时如何让状态栏正常显示？

问题描述 #

想要实现透明的AppBar，但设置背景色为透明后，状态栏亮度出现异常，与白色主题背景融合，无法正常分辨。自定义的setStatusColor函数能正确打印'Light'或'Dark'，但状态栏未出现预期变化。

页面完整代码 #

import 'package:demo2/pages/create_post_page.dart';
import 'package:demo2/pages/following_post_page.dart';
import 'package:demo2/pages/home_page.dart';
import 'package:demo2/pages/message_page.dart';
import 'package:demo2/pages/notification_page.dart';
import 'package:demo2/pages/saved_page.dart';
import 'package:demo2/pages/search_page.dart';
import 'package:demo2/popup/profile_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart';

class ScreenWrapper extends StatefulWidget {
  ScreenWrapper({super.key});
  

  @override
  State<ScreenWrapper> createState() => _ScreenWrapperState();
}

class _ScreenWrapperState extends State<ScreenWrapper> {

  void setStatusColor (bool theme) {
     if (theme) {
          print(Text('Dark'));

        // Changing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: Colors.black,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Colors.black,
          systemNavigationBarIconBrightness: Brightness.dark,
        ));
        print(SystemUiOverlayStyle.dark.statusBarColor.toString());

        }
        else {
          print(Text('Light'));

        // Changing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: Colors.white,
          statusBarIconBrightness: Brightness.light,
          systemNavigationBarColor: Colors.white,
          systemNavigationBarIconBrightness: Brightness.light,

        ));
        }
  }
  
  int _currentIndex = 0;

  final _bottomNavigationBarItems = [
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.home,
      ),
      activeIcon: Icon(
        FeatherIcons.home,
        color: Colors.pink,
      ),
      label: '',
      backgroundColor: null,
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.users,
      ),
      activeIcon: Icon(
        FeatherIcons.users,
        color: Colors.blue,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.plusCircle,
      ),
      activeIcon: Icon(
        FeatherIcons.plusCircle,
        color: Colors.orange,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.heart,
      ),
      activeIcon: Icon(
        FeatherIcons.heart,
        color: Colors.purple,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.bookmark,
      ),
      label: '',
      activeIcon: Icon(
        FeatherIcons.bookmark,
        color: Colors.yellow,
      ),
    ),
  ];

  //display profile sheet
  Future _displayProfileSheet(BuildContext context) {
    return showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => ProfilePage(),
    );
  }

  final PageController _pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
// Getting current theme brightness
        //bool isDark =
          //  MediaQuery.of(context).platformBrightness == Brightness.dark;

    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Stack(
        alignment: Alignment.topCenter,
        children: [
          PageView(
            controller: _pageController,
            onPageChanged: (newIndex) {
              setState(() {
                _currentIndex = newIndex;
              });
            },
            children:  const [
              HomePage(),
              FollowingPostPage(),
              CameraExampleHome(),
              NotificationPage(),
              SavedPage(),
            ],
          ),
           Positioned(
            top:0,
            left: 0,
            right: 0,
            child: AppBar(
              /*systemOverlayStyle: SystemUiOverlayStyle(
                statusBarColor: Colors.transparent,
                statusBarBrightness: Brightness.light,
              ),*/
              backgroundColor: Color.fromARGB(0, 0, 0, 0),
              leadingWidth: 60,
              leading: Padding(
                padding: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.05),
                //to add profile picture
                child: GestureDetector(
                  onTap: () {
                    _displayProfileSheet(context);
                  },
                  child: CircleAvatar(backgroundColor: Colors.blue,)),
              ), 
              elevation: 0,
              actions: [
                  //to add feedback funtion
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Icon(
                      Icons.circle,
                      color: Colors.red.withOpacity(0.5),
                      size: 50,
                      ),
                    IconButton(
                      onPressed: () {}, 
                      icon: Icon(
                        Icons.flag_outlined,
                        size: 30,
                        color: Colors.white,
                        )),
                  ],
                ),
                  //to add search function
                Padding(
                  padding: EdgeInsets.only(right: MediaQuery.of(context).size.width * 0.03),
                  child: Stack(
                    children: [
                      Icon(
                        Icons.circle,
                        color: Colors.grey.shade100.withOpacity(0.1),
                        size: 50,
                        ),
                      IconButton(
                        onPressed: () {}, 
                        icon: Icon(
                          Icons.search,
                          size: 30,)),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 30,
        backgroundColor: Theme.of(context).colorScheme.background,
        fixedColor: null,
        currentIndex: _currentIndex,
        items: _bottomNavigationBarItems,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            _pageController.animateToPage(
              index,
              duration: const Duration(milliseconds: 10),
              curve: Curves.ease,
            );
          });
        },
      ),
    );
  }
}

当前页面效果 #

解决方案 #

1. 触发setStatusColor函数 #

当前代码中setStatusColor仅定义未调用，需在build方法中恢复主题亮度判断并调用函数：

@override
Widget build(BuildContext context) {
  bool isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
  setStatusColor(isDark);
  
  // 原有build代码保持不变
}

2. 统一配置状态栏样式 #

由于设置了extendBodyBehindAppBar: true，建议直接在AppBar中配置systemOverlayStyle，避免与SystemChrome设置冲突：

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 保持状态栏透明
    statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark, // 根据主题切换图标亮度
    statusBarBrightness: isDark ? Brightness.dark : Brightness.light,
  ),
  backgroundColor: Colors.transparent,
  // 其他参数保持不变
)

3. 避免重复设置冲突 #

如果使用AppBar的systemOverlayStyle，可以移除setStatusColor中的SystemChrome相关代码，防止样式被重复覆盖。若需全局初始化，可在initState中设置一次：

@override
void initState() {
  super.initState();
  bool isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
  ));
}

核心逻辑 #

根据当前主题明暗设置状态栏图标亮度：

• 浅色主题下，用深色图标（Brightness.dark）
• 深色主题下，用浅色图标（Brightness.light）
  确保图标与背景有足够对比度，避免融合。

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