flutter-top


本記事では、Flutterで作成したアプリの画面にヘッダーを追加する方法を説明します。



ヘッダーを実装する


今回、ヘッダー部分はmain.dartとは別のheader.dartというファイルを作成してそちらに実装していきます。

header.dartはmain.dartと同じフォルダに作成します。

事前準備として最初にmain.dartを作ります。

main.dart
import 'package:flutter/material.dart';
import 'header.dart';

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

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
appBar: Header(), // appBar プロパティに AppBar Widget を追加
),
);
}
}

appBar:と書かれている部分で、これから実装していくHeaderクラスを呼び出しています。



タイトルを追加する


まずは、ヘッダー部分に画面のタイトルが表示されるようにしていきます。

header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget{
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context){
return AppBar(
title: Text('ホーム'), // タイトル名
backgroundColor: Colors.black87, // ヘッダーの色
centerTitle: true, // タイトルの表示位置
);
}
}

これでアプリを実行してみると以下のような画面になります。

キャプチャ

ヘッダーに画面タイトルが表示されたことを確認できました。


アイコンを追加する


次はヘッダーにアイコンを追加していきます。

まずはよくある設定ボタンのようなアイコンを追加してみます。

先ほどのheader.dartを以下のように書き換えてみます。

header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget{
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context){
return AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0), // マージンの設定
child: Icon(Icons.settings), // アイコンの種類
),
title: Text('ホーム'), // タイトル名
backgroundColor: Colors.black87, // ヘッダーの色
centerTitle: true, // タイトルの表示位置
);
}
}

これを保存すると画面が以下のように変わります。

キャプチャ

アイコンの種類は、
child: Icon(Icons.settings), // アイコンの種類
の部分を変更することで可能です。

Flutterのアイコンの種類ってむちゃくちゃ多いので好みのアイコンを探したい場合、以下のサイトが参考になるかもしれません。




アイコン一つだけなのもさびしいのでもう一つアイコンを追加してみましょう。

header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget{
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context){
return AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0), // マージンの設定
child: Icon(Icons.settings), // アイコンの種類
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.add),
),
],
title: Text('ホーム'), // タイトル名
backgroundColor: Colors.black87, // ヘッダーの色
centerTitle: true, // タイトルの表示位置
);
}
}

header.dartを保存すると画面が以下のように変わります。

キャプチャ

ちなみにleadingで定義したアイコンは左側、actionsで定義したアイコンは右側に表示されます。



まとめ


今回はシンプルなアイコンを実装してみました。

Flutterはアイコンの種類が多いのでどのアイコンを使うか迷いそうです。

次はヘッダのアイコンをタップしたときの動作なんかを実装していきたいです。