flutter单独页面修改状态栏不生效问题

在使用flutterfa仿造小红书app的时候，点击发布需要修改状态栏为黑色。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
        bottomNavigationBar: CustomBottomAppBar(
          onTap: (index) {
            if (index == 2) {
              Future.delayed(Duration(milliseconds: 100), () {
                _showBottomSheet(context);
              });
              return;
            }
            setState(() {
              currentIndex = index;
            });
          },
          currentIndex: currentIndex,
          items: [
            BottomAppBarItems(label: "首页"),
            BottomAppBarItems(label: "工具"),
            BottomAppBarItems(iconCenter: const Icon(Icons.add_box_rounded, size: 35, color: Colors.red,)),
            BottomAppBarItems(label: "消息"),
            BottomAppBarItems(label: "我"),
          ],
        )
    );
  }

  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      backgroundColor: Colors.black,
      context: context,
      isScrollControlled: true,
      useSafeArea: true,
      barrierColor: Colors.white,
      builder: (context) => Public()
    ).whenComplete(() {
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
      ));
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Publish页面代码

 @override
  void initState() {
    super.initState();
    // 设置状态栏颜色为黑色
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.black,
      statusBarIconBrightness: Brightness.light,
    ));
    _showImage();
    _showVideo();
  }
1
2
3
4
5
6
7
8
9
10
11

上面代码没有问题，后来在调试中发现只有从首页跳转的时候才会出现状态栏不会变成黑色，有时候还会闪烁。

后来才发现如果首页不设置SafeArea，而Public页面设置了SystemChrome.setSystemUIOverlayStyle来更改状态栏颜色，可能会导致状态栏颜色在页面切换时没有被改变。这可能是由于状态栏颜色更改不会触发重新布局，因为没有内容占据状态栏的区域。

再此地记录下，想要单独页面更改状态栏需要设置SafeArea。在Flutter中，SafeArea会在其内部自动保留一定的空间