FlutterのAppBarを活用して画面上部をより便利に

モバイル開発•2025/1/28

Flutter Dart

はじめに

Flutterでアプリを作るときに、画面上部に配置されるバーは使いやすさを左右する大きなポイントだと感じませんか。そんなときに登場するのが、AppBar です。

画面上部にタイトルやアイコン、ナビゲーションボタンを設定できるため、多くのアプリで活用されています。しかし最初は、「どうやって配置して、どこまでカスタマイズできるんだろう」という疑問を持つかもしれませんね。

ここでは、AppBarを使った画面上部の作り方を、初心者の皆さんにもわかりやすい言葉でお伝えします。基本的な使い方から、よくあるカスタマイズ方法、そして実務での活用シーンまで紹介するので、ぜひ開発の参考にしてください。

この記事を読むとわかること

AppBarの基本的な役割と仕組み
具体的なコードの書き方とレイアウト方法
実務で役立つカスタマイズの例
画面上部で必要となるよくある機能やUI要素の実装方法

FlutterのAppBarとは？

AppBarは、Flutterアプリの上部に表示されるバーを実装できるウィジェットです。一般的にはタイトルテキストや戻るボタン、メニューアイコンなどが含まれます。

例えば、音楽アプリでは曲名や戻るボタンがAppBarに配置されることが多いですし、ニュースアプリならカテゴリの切り替えアイコンが並ぶこともあります。このように、画面上部に何かしらの操作を置くときにAppBarが役立ちます。

Material Designに沿って作られた設計のため、見た目も統一感があり、構成要素がわかりやすい点が特長です。使い方もシンプルなので、初めてFlutterを触る方でも覚えやすいでしょう。

基本的なAppBarの使い方

AppBarを使う際は、通常Scaffoldウィジェットと一緒に設定します。 ScaffoldのappBarプロパティにAppBarを割り当てると、画面上部に自動的にバーが表示されます。下記は最小限のサンプルコードです。


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('アプリのタイトル'),
        ),
        body: Center(
          child: Text('メイン画面のコンテンツ'),
        ),
      ),
    );
  }
}

ここでは、titleにテキストをセットしています。 AppBarの背景色はデフォルトで青系の色が使われますが、AppBarにbackgroundColor: Colors.redのようなプロパティを付与すれば簡単に色を変えられます。また、brightnessやactionsなどで細かい設定もできますが、まずはタイトルを表示する最も基本的な構成を押さえるのが大切です。

なお、MaterialAppを使うとデフォルトのテーマが適用され、AppBarが画面上部に固定される形になります。このように基本の使い方はシンプルなので、初心者の方でもどのようにUIが組み上がるのかを理解しやすいでしょう。

AppBarの構造について

AppBarは主に以下のような要素で構成されます。これらを理解すると、どこに何を配置できるのかが把握しやすくなるはずです。

leading

先頭に配置されるアイコンやウィジェットです。戻るボタンやメニューアイコンなどを配置することが多いです。

title

中央または左寄せなどで表示されるタイトル部分です。テキストだけでなく、ロゴや検索バーなどを配置するケースもあります。

actions

右側に配置されるアイコンやウィジェットです。通知アイコン、共有アイコン、設定メニューなどを並べると、ユーザーがすぐにアクセスできます。

これら以外にも、flexibleSpaceやbottomを使って、より複雑なUIを作ることも可能です。例えばタブを配置して画面を切り替えたり、画像を背景として表示したりする方法もあります。ただし複雑な機能を実装する前に、まずは基本構造をしっかり理解しておくことが大事ですね。

よくあるカスタマイズパターン

AppBarは基本の設定だけでも便利ですが、少し工夫するだけでアプリの雰囲気が大きく変わります。ここからは、初心者でも取り入れやすいカスタマイズ例を紹介します。

色やサイズを変える

AppBarの背景色は、backgroundColorプロパティで指定できます。同時に、全体の高さを調整したいときは、toolbarHeightを指定します。


appBar: AppBar(
  backgroundColor: Colors.orange,
  toolbarHeight: 70.0,
  title: Text('オレンジ色のAppBar'),
),

これだけで印象がガラッと変わるので、ブランドカラーやアプリのテーマカラーに合わせてみましょう。

タイトルの中央寄せ

デフォルトでは左寄せになりやすいタイトルを、中央に配置したいことがあります。その場合は、centerTitle: trueを指定します。


appBar: AppBar(
  title: Text('中央寄せタイトル'),
  centerTitle: true,
),

アイコンを多用するアプリでは、タイトルが中央にあるとバランスがとりやすいかもしれません。

実務での活用シーン

AppBarは、画面遷移を伴うアプリでよく使われます。例えば、ショッピングアプリなら商品一覧から詳細画面に進むとき、AppBarに戻るボタンを表示させることはよくあるケースですよね。

また、チーム開発でもAppBar部分だけデザイナーがカスタムデザインを用意してくれることがあります。その際には、背景に画像を敷いたり、タイトル部分にカスタムウィジェットを置いたりすることもあります。 Flutterでは柔軟にウィジェットを配置できるため、デザインコンセプトに合わせた多様なAppBarを実装可能です。

画面上部に必須の要素を配置することで、ユーザーが見失いにくくなるのもポイントです。例えば検索アイコンをAppBarに置いておくと、すぐに調べたいときに迷わずアクセスできます。

このように、実務シーンではユーザーが頻繁に触れる操作をAppBarにまとめると、使いやすいアプリに仕上がります。ただし、アイコンを増やしすぎると煩雑になる可能性があるので、機能の優先度を考えながら配置しましょう。

アイコンを並べすぎるとUIがごちゃつきやすいです。実際にユーザーがよく使う機能を厳選し、わかりやすく配置することが大切です。

アイコンやアクションを追加

AppBarにアイコンを追加するには、leadingやactionsプロパティにアイコンウィジェットを渡すだけです。一般的にはIconButtonを使って、アイコンをタップしたときの処理を設定します。


appBar: AppBar(
  title: Text('アイコンの追加例'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // メニューを開く処理など
    },
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 検索画面を開く処理など
      },
    ),
    IconButton(
      icon: Icon(Icons.notifications),
      onPressed: () {
        // 通知一覧を表示するなど
      },
    ),
  ],
),

先頭にメニューアイコンを配置し、右側に検索や通知のアイコンを置く構成は多くのアプリで使われています。ここで、アイコンの種類はIcons.xxxという形で豊富に用意されているので、簡単に用途に合わせたアイコンが見つかると思います。

ビルド時にアイコンのタップイベントをハンドリングすることで、特定の機能を呼び出せる設計が柔軟さのポイントです。ショッピングアプリなら、ショッピングカートアイコンにしたり、チャットアプリならメッセージアイコンに置き換えるなど、さまざまな用途で応用できます。

大きな画像を背景にするケース

デザインによっては、AppBarの背景に画像を配置したい場合もあります。そのときは、flexibleSpaceを活用します。


appBar: AppBar(
  title: Text('背景画像のAppBar'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/background.jpg'),
        fit: BoxFit.cover,
      ),
    ),
  ),
),

これにより、AppBar全面に画像が敷かれたデザインが可能です。アプリに独自の世界観を取り入れるときに便利でしょう。ただし、タイトルやアイコンが視認しにくくなる場合があるので、文字色やアイコン色の調整もあわせて行うことが大切ですね。

このように、AppBarは単に背景色を変えるだけでなく、柔軟にレイアウトを変えられます。

タブ付きのAppBarにする方法

複数の画面をタブ切り替えしたい場合、TabBarを使うのが一般的です。 AppBarのbottomプロパティにTabBarを設定すると、AppBarの下部にタブが表示されます。


class MyTabApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('タブ切り替え'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'ホーム'),
                Tab(text: 'ニュース'),
                Tab(text: '設定'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('ホーム画面')),
              Center(child: Text('ニュース画面')),
              Center(child: Text('設定画面')),
            ],
          ),
        ),
      ),
    );
  }
}

これにより、AppBarの下にタブが並び、ユーザーがタップすると画面を切り替えられます。一度に多くの機能を見せたい場合にも便利ですね。実務でも複数のコンテンツをまとめたいアプリでよく利用されます。

まとめ

ここまで、AppBarの基本的な構造から、色やアイコンの設定、背景に画像を敷く方法などを紹介しました。 FlutterのAppBarはウィジェット単位で柔軟に操作できるため、自分で作りたいUIを組み立てやすい仕組みになっています。

実務で取り入れる場合は、チームメンバーやデザイナーと相談しながら、ユーザーが使いやすいレイアウトを検討するとよいでしょう。 AppBarに重要なアクションや画面遷移ボタンを設置するだけで、アプリの利便性がぐっと上がることがあります。

開発に慣れるほど、より高度なカスタマイズやアニメーションなどにも挑戦したくなるかもしれませんね。しかし、まずは基本形を使いこなして、確実に操作できるAppBarを作ることが大切ではないでしょうか。

みなさんのアプリでも、ぜひAppBarを活用して快適な画面上部を実現してください。