制作Note

2024.07.19 ｜
制作Note
コメントはまだありません

AppBarの高さを変更してpaddingを効かす｜flutter

api.flutter.dev
AppBar class - material library - Dart API
https://api.flutter.dev/flutter/material/AppBar-class.html
API docs for the AppBar class from the material library, for the Dart programming language.

AppBarの高さを変更するにはPreferredSizeウィジェットが使用され、その中に他のウィジェット（通常はTabBarやPreferredSize自体がカスタムウィジェットであることが多いです）が配置されます。

方法1: PreferredSizeをカスタマイズする方法

PreferredSizeをカスタマイズしてpaddingを追加する方法です。

PreferredSize(
  preferredSize: Size.fromHeight(60.0),  // AppBarの高さを設定する
  child: Container(
    padding: EdgeInsets.only(bottom: 8.0),  // 下部に8ピクセルのpaddingを追加する
    color: Colors.blue,
    child: Align(
      alignment: Alignment.bottomCenter,
      child: Text(
        'Custom Bottom Widget',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)
方法2: BottomにPaddingを追加する方法

bottomに直接Paddingウィジェットを追加する方法です。

AppBar(
  title: Text('AppBar with Padding'),
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(60.0),  // AppBarの高さを設定する
    child: Padding(
      padding: EdgeInsets.only(bottom: 8.0),  // 下部に8ピクセルのpaddingを追加する
      child: Container(
        color: Colors.blue,
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Text(
            'Custom Bottom Widget',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ),
)

この方法では、bottomに直接Paddingを追加しています。PreferredSizeを使ってAppBarの高さを設定し、その中にPaddingとContainer、Align、そしてTextウィジェットを配置しています。

どちらの方法も、bottomにpaddingを追加してAppBarの下部に余白を作ることができます。必要に応じて、EdgeInsetsの値を調整して、適切な見た目に調整してください。