FlutterのAppBar

この記事では、FlutterのAppBarについて書いていきます。

AppBarとは
よく使用されるプロパティ
サンプル

AppBarとは

アプリバーは画面上部に表示される画面タイトルや検索アイコン・メニュー・戻るボタンなどのナビゲーションを担っています。

よく使用されるプロパティ

プロパティ名	型	説明
title	Widget?	タイトル部分に表示するウィジェット（主に Text ウィジェット）。
leading	Widget?	左端（または標準の位置）に表示するウィジェット（戻るボタンやメニューアイコンなど）。
actions	List<Widget>?	右端に並べるアクションウィジェットのリスト（検索や設定アイコンなど）。
bottom	PreferredSizeWidget?	AppBarの最下部に表示するウィジェット（主に TabBar など）。
flexibleSpace	Widget?	AppBarの背景領域に配置するウィジェット（背景画像やグラデーションなど）。
backgroundColor	Color?	AppBarの背景色。
foregroundColor	Color?	アイコンやテキストのデフォルト表示色。
elevation	double?	AppBarの影の深さ（影の濃さ）。
shadowColor	Color?	elevation によって投影される影の色。
centerTitle	bool?	タイトルを中央揃えにするかどうか（true で中央寄せ）。
titleSpacing	double?	leading と title の間の余白サイズ。
automaticallyImplyLeading	bool	leading が未指定の場合、自動で戻るボタンやドロワーアイコンを表示するかどうか（デフォルトは true）。
iconTheme	IconThemeData?	AppBar内のアイコンスタイル（色やサイズなど）を一括指定。
actionsIconTheme	IconThemeData?	actions エリア内専用のアイコンスタイル指定。
titleTextStyle	TextStyle?	title ウィジェットに適用するテキストスタイル。
toolbarHeight	double?	ツールバー本体の高さ（デフォルトは kToolbarHeight = 56.0）。
toolbarOpacity	double	ツールバー要素の不透明度（0.0 〜 1.0）。
bottomOpacity	double	bottom ウィジェットの不透明度（0.0 〜 1.0）。
systemOverlayStyle	SystemUiOverlayStyle?	ステータスバー（画面最上部のバッテリーや時間等）の表示スタイル指定。

サンプル

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const CustomAppBarExample(),
    );
  }
}

class CustomAppBarExample extends StatelessWidget {
  const CustomAppBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    // TabBar を使うために DefaultTabController で囲みます
    return DefaultTabController(
      length: 2, // タブの数
      child: Scaffold(
        appBar: AppBar(
          // 1. 自動戻るボタンを無効化（明示的に leading をカスタムするため）
          automaticallyImplyLeading: false,

          // 2. 左端のウィジェット（ドロワーや戻るボタンなど）
          leading: IconButton(
            icon: const Icon(Icons.menu),
            tooltip: 'メニュー',
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('メニューがタップされました')),
              );
            },
          ),

          // 3. メインタイトル
          title: const Text(
            'AppBar デモ',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20,
            ),
          ),

          // 4. タイトルの中央揃え（iOS風レイアウト）
          centerTitle: true,

          // 5. テキストやアイコンの基本カラー
          foregroundColor: Colors.white,

          // 6. 右端のアクションボタン群
          actions: [
            IconButton(
              icon: const Icon(Icons.search),
              tooltip: '検索',
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.notifications),
              tooltip: '通知',
              onPressed: () {},
            ),
            PopupMenuButton<String>(
              onSelected: (value) {},
              itemBuilder: (BuildContext context) => [
                const PopupMenuItem(value: 'setting', child: Text('設定')),
                const PopupMenuItem(value: 'help', child: Text('ヘルプ')),
              ],
            ),
          ],

          // 7. アプリバー背面のカスタムデザイン（グラデーション背景）
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.indigo],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
          ),

          // 8. 影・立体感の設定
          elevation: 4.0,
          shadowColor: Colors.black54,

          // 9. 下部に固定表示する TabBar
          bottom: const TabBar(
            indicatorColor: Colors.amber,
            indicatorWeight: 3.0,
            labelColor: Colors.amber,
            unselectedLabelColor: Colors.white70,
            tabs: [
              Tab(icon: Icon(Icons.home), text: 'ホーム'),
              Tab(icon: Icon(Icons.person), text: 'マイページ'),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            Center(child: Text('ホーム画面のコンテンツ')),
            Center(child: Text('マイページ画面のコンテンツ')),
          ],
        ),
      ),
    );
  }
}