Flutterラボの

プレミアム会員になる

2021.12.04

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

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

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ラボ 現役エンジニアが教えるFlutter学習! プログラミング初心者でもiOS・Android・WEBアプリ開発を学ぶことがで www.youtube.com


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt