[Flutter]AppBarの下に区切り線を付けるには？

どうも、ちょげ(@chogetarou)です。

AppBarの下に区切り線を付ける方法を紹介します。

方法

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text('Sample'),
            bottom: PreferredSize(
                child: Container(
                  height: 5, //高さ
                  color: Colors.red, //色
                ),
                preferredSize: Size.fromHeight(5)),//高さ
          ),
          body: Center()),
    );
  }

AppBarの下に区切り線を付けるには、PreferredSizeとContainerウェジェットを使います。

まず、AppBarの引数「bottom」に「PreferredSizeウェジェット」を指定します。

AppBar(
       bottom: PreferredSize(
                preferredSize: Size.fromHeight(5)
　　　　　　　　　),
    ),

PreferredSizeの引数「preferredSize」で、区切り線の高さを設定します。

そして、引数「child」に「Containerウェジェット」を配置します。

      appBar: AppBar(
            title: Text('Sample'),
            bottom: PreferredSize(
                child: Container(
                  height: 5,
                  color: Colors.red,
                ),
                preferredSize: Size.fromHeight(5)),
          ),

Containerウェジェットの引数「height」には、preferredSizeと同じ高さを指定します。

また、引数「color」で区切り線の色を指定します。

これで区切り線が表示されるようになります。

Divider(
     height: 5,
     thickness: 5,
     color: Colors.red,
),