![見出し画像](https://assets.st-note.com/production/uploads/images/67058303/rectangle_large_type_2_1e8a1f92c308c9eef9f6297a0574d6f9.png?width=1200)
【Flutter】AppBarの使い方まとめ
Flutterアプリ開発で頻出Widgetの『AppBar』ですが、初心に戻って改めて使い方を解説したいと思います。
AppBarはStatefulWidgetですので、childやchildrenの中に入れて使うこともできますが、ScaffoldのappBarプロパティの中で使用するケースがほとんどです。
return Scaffold(
appBar: AppBar(),
);
![](https://assets.st-note.com/img/1638608405152-MBJgdi8JPf.png?width=1200)
AppBarのなかでもよく使うプロパティをいくつか紹介したいと思います。
ちなみに、AppBarの高さを変える方法は以前に記事を出しているのでそちらをご覧ください。
title
AppBarの中で最も使用されるプロパティです。
ここにTextで文字を入れて使うことが多いです。
AppBar(
title: const Text('Flutterラボ'),
),
![](https://assets.st-note.com/img/1638608583855-BwdTg5qek4.png?width=1200)
centerTitle
trueにすることによって、titleの位置を中央にすることができます。
AppBar(
title: const Text('Flutterラボ'),
centerTitle: true,
),
![](https://assets.st-note.com/img/1638608709929-4TmHvLmPDN.png?width=1200)
leading
左端に表示するWidgetを指定することができます。
AppBar(
title: const Text('Flutterラボ'),
centerTitle: true,
leading: const Icon(Icons.menu),
),
![](https://assets.st-note.com/img/1638608910550-o8xn8DGM7T.png?width=1200)
actions
右端に表示するWidgetを複数指定することができます。
AppBar(
title: const Text('Flutterラボ'),
centerTitle: true,
leading: const Icon(Icons.menu),
actions: const [
Icon(Icons.add),
Icon(Icons.done),
],
),
![](https://assets.st-note.com/img/1638609028355-3FtEgfKR4j.png?width=1200)
backgroundColor
背景色はもともとテーマカラーになっていますが、それを指定して変更することができます。
AppBar(
title: const Text('Flutterラボ'),
centerTitle: true,
leading: const Icon(Icons.menu),
actions: const [
Icon(Icons.add),
Icon(Icons.done),
],
backgroundColor: Colors.red,
),
![](https://assets.st-note.com/img/1638609161747-WIsfXHgxkZ.png?width=1200)
elevation
AppBarの下にある影を大きくすることができ、デフォルト値は4です。
AppBar(
title: const Text('Flutterラボ'),
centerTitle: true,
leading: const Icon(Icons.menu),
actions: const [
Icon(Icons.add),
Icon(Icons.done),
],
backgroundColor: Colors.red,
elevation: 20,
),
![](https://assets.st-note.com/img/1638609421548-T689EJg7GU.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?