こんな感じのを作ります。
早速コードを提示します。
コード
class Header extends StatelessWidget {
const Header({
super.key,
});
Widget build(BuildContext context) {
return Container(
color: Colors.amber,
child: Stack(
alignment: Alignment.center, // 子ウィジェットを中央に配置
children: [
Row(
children: [
IconButton(
onPressed: () {}, // 左端のボタン
icon: Icon(Icons.close),
),
Spacer(), // 左右のボタンの間にスペースを追加
IconButton(
onPressed: () {}, // 右端のボタン1
icon: Icon(Icons.person),
),
IconButton(
onPressed: () {}, // 右端のボタン2
icon: Icon(Icons.add),
),
],
),
// StackのAlignment.centerにより中央に位置するタイトルになる
Text('Title'),
],
),
);
}
}
解説
Stack
でタイトルとボタンを同じレイヤー(children
)に含める- ボタン
- 右または左端にボタンをもつ
Row
をつくる。- 中央を余白で埋めたいので、
Spacer
をつかう - 左端にボタン:
Spacer Button
、右端にボタン:Button Spacer
、両端にボタン:Button Spacer Button
のパターンが実現可能
- 中央を余白で埋めたいので、
- 右または左端にボタンをもつ
- タイトル
Stack
のalignment
をAlignment.center
に設定することで、タイトルを中央に配置する
さいごに
この実装で残る懸念は
タイトル部分がボタンに重なってしまう可能性があることです。たとえば長いタイトルになると重なります。
Material Designをみると、モーダル内のタイトルは右寄りになっているので、そもそも中央にするのは避けるべきなのかもしれません。
あるいは AppBar を使えばいいだけの話なのかもしれません。
この記事がなにかのヒントになればと思います。
関連する投稿があります
ブログ運営者
muuuuminn
経歴:
SE:1年半 → FE:5年 → ?スキル:
Next.js, TypeScript, React, Notion趣味:
ゲーム, 手品, 開発, コレクション, 映画