flutter開發使用AnnotatedRegion修改狀態欄字體顏色，導致導航欄也變黑了的解決方法

flutter開發使用AnnotatedRegion修改狀態欄字體顏色，導致導航欄也變黑了的解決方法

原因解析：下面這樣寫出問題的原因在於使用AnnotatedRegion包裹了整個頁面，從而導致手機最底部的導航欄變黑了，其實也出現了截取。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnnotatedRegion(	//使用AnnotatedRegion修改狀態欄字體顏色，但是這樣寫導航欄也變黑了。
    	value: SystemUiOverlayStyle.dark,
      child: Container(
        color: Colors.white,
        child: ListView(
          children: <Widget>[
            Header(),
            Cells(context),
            Cells(context),
            ...
          ],
        ),
      ),
    ),
  );

正確寫法：AnnotatedRegion應該只包裹頂部狀態欄處的控件，比如AppBar的寫法就不會導致底部導航欄變黑。正確寫法如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
      	//將Header抽取出來，AnnotatedRegion只包裹頂部的Header，這樣寫既能實現修改狀態欄字體，也沒有影響到底部導航欄。
        AnnotatedRegion(child: Header(), value: SystemUiOverlayStyle.dark),
        Expanded(
          child: Container(
            color: Colors.white,
            child: ListView(
              children: <Widget>[
                Cells(context),
                Cells(context),
                ...
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

或者使用系統自帶的AppBar實現，代碼如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(	//AppBar只影響到頂部狀態欄，沒有影響整個頁面吧？所以也就沒有影響到底部的導航欄了。道理是一樣的。
      brightness: Brightness.light,//Brightness.light對應SystemUiOverlayStyle.dark，具體看源碼就知道了。
    ),
    body: Container(
      color: Colors.white,
      child: ListView(
        children: <Widget>[
          Cells(context),
          Cells(context),
          ...
        ],
      ),
    ),
  );
}

這個問題困擾了很久呀，怎么頁面切換着，最下面的導航欄變黑了。。。原來是AnnotatedRegion若的禍。。。