FlutterのAppBarをフルカスタマイズする方法

2023年6月3日

Flutterで独自のアプリを作る際、UIの一部としてAppBarのカスタマイズは欠かせません。

本記事では、基本的なAppBarのカスタマイズから、アイコンやボタンの追加、タブやドロワーの追加までを詳しく解説します。

FlutterのAppBarの役割と重要性

AppBarとは？

「AppBar」は、Flutterアプリケーションの一般的な画面上部に位置するツールバーのことを指します。通常、アプリの名前、ナビゲーションメニュー、またはページに固有のアクションを表示するために使用されます。AppBarはMaterial Designのガイドラインに基づいて設計されており、その見た目や振る舞いはこのガイドラインに従っています。

AppBarは非常に柔軟性が高く、タイトル表示からアクションボタン、メニューボタン、タブバーなど、さまざまなカスタマイズが可能です。特に、アプリ全体の統一感を出すためには重要な要素となります。また、ユーザーの操作を支援するための要素としても働きます。例えば、画面遷移時の戻るボタンなどは、ユーザビリティを高めるための重要な機能です。

なぜAppBarのカスタマイズが重要なのか？

AppBarのカスタマイズが重要な理由はいくつかありますが、主なものは以下の2点です。

ユーザーエクスペリエンスの向上

AppBarはアプリケーションの一部としてユーザーに最初に目に入る部分であり、アプリの全体的な見た目や感じを決定する重要な要素です。そのため、AppBarを適切にカスタマイズすることで、ユーザーの体験を向上させることができます。例えば、アプリのテーマカラーにAppBarの色を合わせたり、ユーザーが頻繁に使用する機能をAppBarに配置することで、ユーザーがアプリを使いやすく感じるようにすることが可能です。

アプリのブランディング

AppBarはアプリケーションの「顔」とも言えます。したがって、AppBarのデザインやスタイルは、アプリのブランディングに大きな影響を与えます。AppBarをカスタマイズすることで、アプリのブランドイメージを強化し、ユーザーにアプリのアイデンティティを伝えることができます。

以上の理由から、AppBarのカスタマイズはFlutterアプリケーション開発において重要なステップとなります。

基本的なAppBarのカスタマイズ

AppBarの色の変更

AppBarの色を変更することで、アプリの見た目を大きく変えることができます。以下に、AppBarの色を変更する方法を説明します。

まず、AppBarウィジェットのbackgroundColorプロパティを利用して、AppBarの背景色を変更できます。例えば、以下のようにAppBarウィジェットのbackgroundColorプロパティに色を設定することで、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('カスタマイズしたAppBar'),
          backgroundColor: Colors.deepOrange, // AppBarの背景色を変更
        ),
        body: Center(child: Text('AppBarの色を変更しました')),
      ),
    );
  }
}

上記の例では、AppBarウィジェットのbackgroundColorプロパティにColors.deepOrangeを設定して、AppBarの背景色を深いオレンジ色に変更しています。

また、アプリ全体のテーマカラーを指定して、AppBarの背景色を自動的に変更させることもできます。これには、MaterialAppウィジェットのthemeプロパティを使用します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.purple, // アプリ全体のプライマリカラーを設定
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('カスタマイズしたAppBar'),
        ),
        body: Center(child: Text('AppBarの色を変更しました')),
      ),
    );
  }
}

上記の例では、MaterialAppウィジェットのthemeプロパティにprimarySwatchを設定して、アプリ全体のプライマリカラーを紫色に変更しています。これにより、AppBarの背景色も自動的に紫色になります。

AppBarのテキストスタイルの変更

AppBarのテキストスタイルを変更することで、アプリの見た目やブランディングを向上させることができます。以下に、AppBarのテキストスタイルを変更する方法を説明します。

AppBarウィジェットのtitleプロパティに対して、Textウィジェットのstyleプロパティを使ってテキストスタイルを変更することができます。例えば、以下のようにTextウィジェットのstyleプロパティにスタイルを設定することで、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(
            'カスタマイズしたAppBar',
            style: TextStyle(
              fontSize: 24.0, // フォントサイズを変更
              fontWeight: FontWeight.bold, // フォントウェイトを変更
              color: Colors.white, // テキストカラーを変更
            ),
          ),
          backgroundColor: Colors.deepOrange,
        ),
        body: Center(child: Text('AppBarのテキストスタイルを変更しました')),
      ),
    );
  }
}

上記の例では、TextウィジェットのstyleプロパティにTextStyleオブジェクトを設定し、フォントサイズ、フォントの太さ、テキストカラーをそれぞれ変更しています。

また、Themeウィジェットを使ってアプリ全体のテーマを設定することで、AppBarのテキストスタイルも一括で変更することができます。これには、MaterialAppウィジェットのthemeプロパティを使用します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          toolbarTextStyle: TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('カスタマイズしたAppBar'),
          backgroundColor: Colors.deepOrange,
        ),
        body: Center(child: Text('AppBarのテキストスタイルを変更しました')),
      ),
    );
  }
}

上記の例では、MaterialAppウィジェットのthemeプロパティにAppBarThemeを設定し、toolbarTextStyleを用いてAppBarのテキストスタイルを変更しています。これにより、アプリ全体で一貫したテキストスタイルが適用されます

AppBarの高さの変更

AppBarの高さを変更することで、アプリのデザインをより柔軟にカスタマイズできます。以下に、AppBarの高さを変更する方法を説明します。

AppBarの高さを変更するには、PreferredSizeウィジェットを使って、AppBarに新しい高さを設定します。PreferredSizeウィジェットは、childウィジェットに与えられるサイズを調整できるため、AppBarの高さ変更に利用できます。以下に例を示します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(80.0), // AppBarの高さを変更
          child: AppBar(
            title: Text('カスタマイズしたAppBar'),
            centerTitle: true,
            backgroundColor: Colors.deepOrange,
          ),
        ),
        body: Center(child: Text('AppBarの高さを変更しました')),
      ),
    );
  }
}

上記の例では、PreferredSizeウィジェットを使って、AppBarの高さを80.0に変更しています。PreferredSizeウィジェットのpreferredSizeプロパティにSize.fromHeightメソッドを用いて新しい高さを指定します。

この方法で、アプリのデザインに合わせてAppBarの高さを簡単に変更できます。ただし、高さを適切に設定することが重要です。AppBarの高さが過大または過小に設定されると、アプリの操作性や見た目が悪影響を受ける可能性があります。高さを変更する際は、デバイスの画面サイズやアプリのデザイン要素に注意して調整してください。

アイコンとボタンを追加してAppBarを拡張する

アイコンの追加とカスタマイズ

アプリのAppBarにアイコンを追加し、カスタマイズすることで、ユーザビリティを向上させ、アプリの見た目を改善することができます。以下に、AppBarにアイコンを追加し、カスタマイズする方法を説明します。

AppBarにアイコンを追加するには、actionsプロパティにIconButtonウィジェットを追加します。以下に例を示します。

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('アイコンの追加とカスタマイズ'),
          actions: [
            IconButton(
              icon: Icon(Icons.favorite),
              onPressed: () {
                // お気に入りアイコンが押された時の処理
              },
            ),
          ],
        ),
        body: Center(child: Text('AppBarにアイコンを追加しました')),
      ),
    );
  }
}

アイコンの色やサイズなどの外観を変更することで、アプリのデザインを一貫させることができます。IconButtonウィジェット内のIconウィジェットのプロパティを変更することで、アイコンの外観をカスタマイズできます。以下に例を示します。

IconButton(
  icon: Icon(
    Icons.favorite,
    color: Colors.pink,
    size: 30.0,
  ),
  onPressed: () {
    // お気に入りアイコンが押された時の処理
  },
)

上記のコードでは、アイコンの色をピンクに変更し、サイズを30.0に設定しています。

また、onPressedプロパティに処理を追加することで、アイコンがタップされた際の動作をカスタマイズできます。

アクションボタンの追加とカスタマイズ

AppBarにアクションボタンを追加し、カスタマイズすることで、アプリの操作性を向上させ、より効率的なユーザーエクスペリエンスを提供できます。以下に、AppBarにアクションボタンを追加し、カスタマイズする方法を説明します。

AppBarにアクションボタンを追加するには、actionsプロパティにElevatedButtonやTextButtonなどのボタンウィジェットを追加します。以下に例を示します。

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('アクションボタンの追加とカスタマイズ'),
          actions: [
            TextButton(
              onPressed: () {
                // ボタンが押された時の処理
              },
              child: Text('アクション'),
            ),
          ],
        ),
        body: Center(child: Text('AppBarにアクションボタンを追加しました')),
      ),
    );
  }
}

アクションボタンの外観や動作を変更することで、アプリのデザインや機能に合わせてカスタマイズが可能です。ボタンウィジェットのプロパティを変更することで、アクションボタンの外観や動作をカスタマイズできます。

例えば、TextButtonの文字色を変更したい場合、以下のようにstyleプロパティを使用します。

TextButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('アクション'),
  style: TextButton.styleFrom(
    primary: Colors.white,
  ),
)

上記のコードでは、TextButtonの文字色を白に変更しています。また、onPressedプロパティに処理を追加することで、ボタンがタップされた際の動作をカスタマイズできます。

AppBarにタブとドロワーを追加する

タブの追加とカスタマイズ

タブを追加し、カスタマイズすることで、アプリの内容を整理しやすくし、ユーザーエクスペリエンスを向上させることができます。以下に、AppBarにタブを追加し、カスタマイズする方法を説明します。

AppBarにタブを追加するには、DefaultTabControllerウィジェットを利用し、TabBarウィジェットをAppBarのbottomプロパティに配置します。以下に例を示します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('タブの追加とカスタマイズ'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'タブ1'),
                Tab(text: 'タブ2'),
                Tab(text: 'タブ3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('タブ1の内容')),
              Center(child: Text('タブ2の内容')),
              Center(child: Text('タブ3の内容')),
            ],
          ),
        ),
      ),
    );
  }
}

このコードでは、DefaultTabControllerを使って3つのタブを作成し、それぞれのタブにテキストを配置しています。タブはTabBarウィジェットのtabsプロパティにリスト形式で追加されます。また、TabBarViewウィジェットのchildrenプロパティに、それぞれのタブに表示する内容をリスト形式で追加します。

タブの外観や動作を変更することで、アプリのデザインや機能に合わせてカスタマイズが可能です。TabBarウィジェットのプロパティを変更することで、タブの外観や動作をカスタマイズできます。

例えば、タブのインジケーターの色を変更したい場合、以下のようにindicatorColorプロパティを使用します。

TabBar(
  tabs: [
    Tab(text: 'タブ1'),
    Tab(text: 'タブ2'),
    Tab(text: 'タブ3'),
  ],
  indicatorColor: Colors.red,
)

上記のコードでは、タブのインジケーターの色を赤に変更しています。他にも、labelColorプロパティを使ってタブのテキスト色や、labelStyleプロパティを使ってタブのテキストスタイルを変更することができます。

タブの追加とカスタマイズを通じて、AppBarをより機能的で使いやすくし、アプリの見た目を改善することができます。このカスタマイズにより、ユーザーはアプリを使いやすく感じることでしょう。

TabBarウィジェットのレイアウトや余白を調整することで、タブがアプリのデザインに適した形になります。例えば、TabBarの左右の余白を変更するには、paddingプロパティを使用します。

TabBar(
  tabs: [
    Tab(text: 'タブ1'),
    Tab(text: 'タブ2'),
    Tab(text: 'タブ3'),
  ],
  padding: EdgeInsets.symmetric(horizontal: 20.0),
)

このコードでは、TabBarの左右の余白をそれぞれ20.0に設定しています。このように、余白やレイアウトを調整することで、タブの見た目をカスタマイズできます。

場合によっては、多数のタブを表示する必要がありますが、その際にタブの幅を狭めると、見やすさが失われてしまうことがあります。そんな時に役立つのが、タブをスクロール可能にする機能です。TabBarウィジェットのisScrollableプロパティをtrueに設定することで、タブのスクロール動作を変更できます。

TabBar(
  isScrollable: true,
  tabs: [
    Tab(text: 'タブ1'),
    Tab(text: 'タブ2'),
    Tab(text: 'タブ3'),
    Tab(text: 'タブ4'),
    Tab(text: 'タブ5'),
  ],
)

このコードでは、isScrollableプロパティをtrueに設定して、タブがスクロール可能になるようにしています。これにより、多数のタブを表示しても見やすく、使いやすいデザインが実現できます。

ドロワーの追加とカスタマイズ

ドロワーは、アプリのナビゲーション要素を表示するためのサイドバーです。ハンバーガーアイコンをタップすることで開閉が可能で、アプリの機能や画面へのアクセスを提供します。AppBarにドロワーを追加してカスタマイズすることで、アプリのナビゲーションを向上させることができます。

ドロワーを追加するには、ScaffoldウィジェットのdrawerプロパティにDrawerウィジェットを設定します。以下はドロワーを追加する基本的なコードです。

Scaffold(
  appBar: AppBar(
    title: Text('ドロワーの追加'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          child: Text('ドロワー ヘッダー'),
          decoration: BoxDecoration(color: Colors.blue),
        ),
        ListTile(
          title: Text('項目 1'),
          onTap: () {
            // 項目 1 の処理
          },
        ),
        ListTile(
          title: Text('項目 2'),
          onTap: () {
            // 項目 2 の処理
          },
        ),
      ],
    ),
  ),
)

このコードでは、ScaffoldウィジェットのdrawerプロパティにDrawerウィジェットを設定し、ドロワーを追加しています。ドロワー内のリスト項目は、ListViewとListTileウィジェットを使用して作成します。

ドロワーの見た目や動作をカスタマイズすることで、アプリのデザインやユーザーエクスペリエンスを向上させることができます。以下に、ドロワーのカスタマイズ例をいくつか示します。

ドロワーヘッダーの背景色を変更するには、DrawerHeaderウィジェットのdecorationプロパティにBoxDecorationを設定し、colorプロパティで色を指定します。また、ドロワー内のテキストスタイルを変更するには、ListTileのstyleプロパティでテキストスタイルを設定します。

ドロワー内のリスト項目にアイコンを追加するには、ListTileウィジェットのleadingプロパティにIconウィジェットを設定します。これにより、ユーザーにとってわかりやすいナビゲーションメニューが作成できます。以下は、アイコンを追加したListTileの例です。

ListTile(
  leading: Icon(Icons.home),
  title: Text('ホーム'),
  onTap: () {
    // ホーム画面への遷移
  },
),

ドロワー内のリスト項目を区切るために、Dividerウィジェットを使用してセパレーターを追加できます。以下は、Dividerを追加した例です。

ListView(
  padding: EdgeInsets.zero,
  children: [
    DrawerHeader(
      child: Text('ドロワー ヘッダー'),
      decoration: BoxDecoration(color: Colors.blue),
    ),
    ListTile(
      leading: Icon(Icons.home),
      title: Text('ホーム'),
      onTap: () {
        // ホーム画面への遷移
      },
    ),
    Divider(), // セパレーターを追加
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('設定'),
      onTap: () {
        // 設定画面への遷移
      },
    ),
  ],
)

これらのカスタマイズを組み合わせることで、アプリケーションに合ったAppBarとドロワーを作成し、ユーザーエクスペリエンスを向上させることができます。最適なデザインや機能を追求しながら、AppBarのカスタマイズを楽しんでください。