ボタンやバーガーアイコンの配置もできるタイトルバー AppBar の利用

AppBar はアプリケーションの上部に配置して、アプリケーションのよく使う機能へのショートカットや各種機能へのナビゲーションに使います。

AppBar はツールバー、フレキシブルスペース、ボトムの３つの構成になっています。それぞれについて簡単にいうと次のようになります。

• ツールバーはリーディングアイコン、タイトル、アクションを含みます。リーディングアイコンエリアは、ラウティングで画面遷移をした場合はバックボタンが自動的に表示されたり、ドロワーがあるときはドロワー表示用のハンバーガーアイコンが表示されたりします。 アクションは各種機能へのショートカットとなるアイコンボタンなどを配置します。
• フレキシブルスペースには、例えば検索ボックスを配置するなどできます。全く使わなくても構いません。
• ボトムには、タブ切り替えのタブを配置するのが一般的です。

次のサンプルはツールバーにアクションとして、アイコンボタンを２つ設置しています。プラスとマイナスのアイコンをタップすると、 それぞれカウンターがインクリメント、デクリメントします。

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar Test'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => setState(() {
                  _count++;
                }),
          ),
          IconButton(
            icon: Icon(Icons.remove),
            onPressed: () => setState(() {
                  _count--;
                }),
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text(
                '$_count',
                style: TextStyle(
                  fontSize: 32.0,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}