App在很多情況下由於各種需求需要自定義標題欄，而在能夠構建Android和IOS應用的Flutter中，如果不在Scaffold中使用AppBar會發現預設是沉浸式。

猜想：我們使用自定義標題欄好像需要知道狀態列的高度，我看到網上很多人想要自定義標題欄，卻老是去找怎麼獲取狀態列的高度

解惑：其實並不用獲取狀態列的高度，你想AppBar也是狀態列，它也需要知道狀態列的高度，它需要說明Flutter已經幫我們獲取到了

接下來一步一步來看

一、怎麼自定義標題欄

輕車熟路的就直接看第二步

自定義MAppBar類

class MAppBar extends StatefulWidget implements PreferredSizeWidget {
  MAppBar({@required 
 
this.child}) : assert(child != null);
  final Widget child;
  @override
  Size get preferredSize {
    return new Size.fromHeight(56.0);
  }
  @override
  State createState() {
    return new MAppBarState();
  }
}
class MAppBarState extends State<MAppBar> {
  @override
  Widget build(BuildContext context) {
    
 
return widget.child;
  }
}

使用

class GoodsPageState extends State<GoodsPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new MAppBar(
        child: new Text("我是標題"),
      ),
      body: new Text("我是內容"),
    );
  }
}

效果

二、增加狀態列

修改程式碼

class MAppBarState extends State<MAppBar> {
  @override
  Widget build(BuildContext context) {
    return new SafeArea(
      top: true,
      child: widget.child,
    );
  }
}

說明

/// Whether to avoid system intrusions at the top of the screen, typically the
/// system status bar.
final bool top;

效果

效果已經很明顯了