【Flutter】AppBarの使い方まとめ

Flutterアプリ開発で頻出Widgetの『AppBar』ですが、初心に戻って改めて使い方を解説したいと思います。

Flutterラボ - 「Flutterラボ」では動画でFlutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで誰でも気軽にFlutterが学べるコンテンツを公開しています。

AppBarはStatefulWidgetですので、childやchildrenの中に入れて使うこともできますが、ScaffoldのappBarプロパティの中で使用するケースがほとんどです。

return Scaffold(
  appBar: AppBar(),
);

AppBarのなかでもよく使うプロパティをいくつか紹介したいと思います。

ちなみに、AppBarの高さを変える方法は以前に記事を出しているのでそちらをご覧ください。

title

AppBarの中で最も使用されるプロパティです。
ここにTextで文字を入れて使うことが多いです。

AppBar(
  title: const Text('Flutterラボ'),
),

centerTitle

trueにすることによって、titleの位置を中央にすることができます。

AppBar(
  title: const Text('Flutterラボ'),
  centerTitle: true,
),

leading

左端に表示するWidgetを指定することができます。

AppBar(
  title: const Text('Flutterラボ'),
  centerTitle: true,
  leading: const Icon(Icons.menu),
),

actions

右端に表示するWidgetを複数指定することができます。

AppBar(
  title: const Text('Flutterラボ'),
  centerTitle: true,
  leading: const Icon(Icons.menu),
  actions: const [
    Icon(Icons.add),
    Icon(Icons.done),
  ],
),

backgroundColor

背景色はもともとテーマカラーになっていますが、それを指定して変更することができます。

AppBar(
  title: const Text('Flutterラボ'),
  centerTitle: true,
  leading: const Icon(Icons.menu),
  actions: const [
    Icon(Icons.add),
    Icon(Icons.done),
  ],
  backgroundColor: Colors.red,
),

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,
),

Flutterラボ