Flutter 填坑篇 - 沉浸式狀態欄效果

在安卓里面沉浸式效果可以下個第三方 statusBarUtil.java 來設置下，很簡單

在Flutter 里面我發現並不簡單（sdk 1.17）

首先網上很多方案基本都是如下：

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); 

 或者

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarIconBrightness: Brightness.dark,
  statusBarColor: Colors.white,
  statusBarBrightness: Brightness.dark,
  systemNavigationBarIconBrightness: Brightness.dark,
));

總之上述代碼的意思就是我想讓我的statusColor 是白色的,icon 是黑色的

但是，沒有效果~

后來我找到一篇文章說要放runApp()的后面,避免被 appBar 顏色覆蓋,我做了如下的實驗

實驗一：

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            _headerWidget(context),
            
          ],
        ),
      ),
    );
  }

我在某個界面build 里面加上這句話,同時 Scaffold 里面不用App組件而是在body里面寫了一個，然后生效了，icon 的顏色變成了黑色，換成 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); 變回白色了

實驗二：

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        title: Text(
          '注冊',
          style: TextStyle(
              color: Color.fromRGBO(51, 51, 51, 1),
              fontSize: ScreenUtil().setSp(36)),
        ),
        backgroundColor: Colors.black12,
      ),
      body: Center(
        child: _centerWidget(),
      ),
    );
  }

我在另一個界面加上這句，但是AppBar是有的，同時設置了backgroundColor(不設置也一樣),這時會覆蓋掉dark,所以可以肯定的是和AppBar 有關系~
這會我的項目布局已經完成了，如果AppBar不能改那我只能和設計商量了,然后我在AppBar里面發現了一個屬性，頓時感覺有希望

brightness:這是屬性，我顯示設置成Brightness.dark，沒有發生變化，心拔涼的~ 然后我就想試試 Brightness.light, 結果變黑了，我尼瑪，爽

看下源碼：

/// If this property is null, then [ThemeData.appBarTheme.brightness] is used,
  /// if that is also null, then [ThemeData.primaryColorBrightness] is used.
  final Brightness brightness;

 

enum Brightness {
  /// The color is dark and will require a light text color to achieve readable
  /// contrast.
  ///
  /// For example, the color might be dark grey, requiring white text.
  dark,

  /// The color is light and will require a dark text color to achieve readable
  /// contrast.
  ///
  /// For example, the color might be bright white, requiring black text.
  light,
}

 還有，SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark) 這句就不需要了

總結，就是多看源碼，可能就有你想要的

謝謝