AppBar — 定義、設定、Flutterウィジェット

FlutterでのAppBarとは

AppBar は、Scaffoldの上部に表示される標準のMaterial上部パネルコンポーネントです。画面タイトル、ナビゲーションボタン（通常は“ハンバーガー”アイコンまたは“戻る”矢印）、アクション（検索、設定、他の機能を開くアイコン）を含みます。AppBarはプラットフォームに応じて自動的に適応します：Androidでは標準のMaterial下部シャドウを使用し、iOSでは透明感のあるフラットなデザインになります。

AppBarはPreferredSizeWidgetインタフェースを実装しており、高さが固定されていて構築前に決定されます。デフォルトでは、縦向きオリエンテーションにおけるAppBarの高さはAndroidで54dp、iOSで44dpで、上部のSafeAreaを考慮しています。この機能により、Scaffoldはレンダリング中の再構成を避けて、bodyの利用可能なスペースを事前に計算できます。

Flutter Material Library Guide (2026)によると、AppBarはいくつかのイテレーションを経てきました：Flutter1.xではテキストを含む単純なコンテナでしたが、Flutter2.xでMaterial3とflexibleSpaceをサポートし、Flutter3.xではSystem UI（ステータスバーの色、透明感）との統合を実現しました。現代のAppBarは、Android12+デバイスでMaterial YouのDynamic Colorをサポートしています。

AppBarの構造：プロパティとパラメータ

AppBarは、上部パネルの各部分を制御するパラメータセットを提供します。これらのプロパティを理解することで、カスタムソリューションを作らずに、様々なデザイン要件に対応するためにパネルを柔軟にカスタマイズできます。

Titleとleading：タイトルとナビゲーションの設定

titleプロパティはあらゆるウィジェットを受け付けますが、一般的にはTextStyleを通じたスタイル設定でTextを使用します。長いタイトルの場合は、スペースが不足したときにテキストが正しく切り詰まれるよう、titleをFlexibleでラップすることをおすすめします。leadingプロパティは、明示的に設定されていなければ、Navigator.pushを通じてネスト画面に移動すると、自動的にBackButtonに置き換えられます。

Actions：アクションアイコンの配置

actionsリストには、AppBarの右端に整列されるウィジェットが含まれます。各要素の幅はVdp（Material Design標準）を超えないようにする必要があります。アクションをグループ化するには、PopupMenuButtonを使用します — これにより、重要でないオプションをドロップダウンメニューに隠し、インタフェース密度に関するMaterialの推奨に従います。

AppBarのカスタマイズ：スタイル、色、動作

AppBarは、色、影、パディングプロパティによって深いカスタマイズをサポートしています。ベースのスタイリングはアプリのテーマから継承されますが、各プロパティは個別にオーバライドできます。主な設定シナリオを見てみましょう。

AppBarの背景色はbackgroundColorで設定されます。指定されていなければ、ThemeDataからのappBarThemeが使用されます。Material3では、AppBarの色はColorScheme.primaryから自動的に計算されますが、特定の画面のためにオーバライドできます。透明なAppBar（プロフィールでよく使用されます）には、elevation: 0とともにbackgroundColor: Colors.transparentを設定します。

elevationプロパティはAppBar下の影を制御します。値0は影を消し、Material3に関連する“フラット”なパネル効果を作ります。値4は標準のMaterial Designの影を与えます。カスタム影制御には、shadowColorを使用します — これはパネルをコンテンツから視覚的に区切る影の色です。

AppBarのテキスト色を制御するには、foregroundColorを使用します。このプロパティは、タイトル、アイコン、actions内のテキストの色に影響します。backgroundColorを変更すると、対照的なforegroundColorが自動的に選択されますが、非標準なデザインのために強制することもできます。

SliverAppBar：AppBarのアニメーションバージョン

SliverAppBarは、CustomScrollView内で使用するAppBarの拡張で、スクロールアニメーション（縮小、パララックス効果、固定）をサポートしています。標準のAppBarとは異なり、SliverAppBarはsliverウィジェットであり、スクロール位置に応じてサイズを動的に変えることができます。

SliverAppBarの主なモードは、pinned、floating、snapプロパティの組み合わせで決定されます。pinnedモードでは、パネルは常に画面の上部に表示されます。floatingモードでは、戻るようにスクロールすると表示されます。floating + snapの組み合わせは、少し上にスクロールするだけで現れる“くっつく”パネル動作を作り、ニュースフィードでよく使用されます。

Flutter API SliverAppBar (2026)によると、SliverAppBarを使用するには、普通のListViewまたはColumnをsliverウィジェットを含むCustomScrollViewに置き換える必要があります。Scaffoldは正常に動作し続けますが、ScaffoldのappBarプロパティはnullである必要があります — SliverAppBarはCustomScrollView内の最初のsliverとして配置されます。

アプリでのAppBar設定例

検索、ドロップダウンメニュー、TabBarを備えたAppBarの例を見てみましょう。このコードは、Flutterのプロダクションアプリにおけるティピカルな上部パネル構成を示しています。

Scaffold(
  appBar: AppBar(
    title: const Text('カタログ'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('設定')),
          const PopupMenuItem(value: 'about', child: Text('アプリについて')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

この例では、AppBarに中央揃えされたタイトル、左側のDrawerを開くボタン、右側の検索アイコンとドロップダウンメニューが含まれています。下部のTabBarは、製品カテゴリを切り替えることができます。この構成は、モバイルアプリの大所、つまりナビゲーション、検索、追加オプション、セクション切り替えを、すべて一つの上部パネルでカバーしています。