【Flutter】AppBarの使い方｜アプリバーを表示・装飾する

「アプリの画面上部にアクションバーを表示したい」

こんな時に便利なのが AppBar ウィジェットです。

AppBarを使用することでアプリの画面上部にアクションバーを表示し、アプリタイトルやアイコンボタンなどを実装できます。またAppBarは基本的にFlutterアプリの画面構成をするScaffoldとセットで使用されます。

それではAppBarの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

AppBarの基本的な使い方について解説します。

AppBarは基本的にScaffoldのappBarプロパティの引数として使用されます。

Scaffold(
  appBar: AppBar(),
);

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

カスタマイズ方法

続いてAppBarのカスタマイズ方法について解説します。

タイトルの表示

アプリバーに表示するタイトルはtitleプロパティで設定できます。

titleプロパティの引数には一般的にTextウィジェットを渡しますが、Text以外のウィジェットを渡すこともできます。またタイトルが真ん中に表示されない場合にはcenterTitleプロパティをtrueにします。

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

アプリバー左側にウィジェットを表示

アプリバーの左側にウィジェットを表示するにはleadingプロパティで設定できます。

AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back_ios),
    onPressed: () {},
  ),
),

アプリバー右側にウィジェットを表示

アプリバーの右側にウィジェットを表示するにはactionsプロパティで設定できます。

actionsプロパティの引数にはWidget型の配列を渡し複数のウィジェットを表示できます。

AppBar(
  actions: [
    IconButton(
      icon: Icon(Icons.star),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
),

背景色

アプリバーの背景色はbackgroundColorプロパティで設定できます。

AppBar(
  backgroundColor: Colors.amber,
),

影の高さ・影の色

アプリバーの影の高さはelevationプロパティ、影の色はshadowColorプロパティで設定できます。

AppBar(
  elevation: 10,
  shadowColor: Colors.amber,
),

テキスト・アイコンの色を一括設定

アプリバーに表示されるテキストやアイコンの色を一括で指定するにはforegroundColorプロパティで設定できます。

AppBar(
  foregroundColor: Colors.amber,
),

まとめ

今回はAppBarの基本的な使い方とカスタマイズ方法について解説しました。

AppBarを使用することでアプリの画面上部にアクションバーを表示し、アプリタイトルやアイコンボタンなどを実装できるのでぜひ使ってみてください。