【 Flutter 】Medium & Large AppBar の実装【 Material 3 】

Flutter 3.3 で更新された、Medium とLarge のAppBar を使ってみたい！

本記事では、そんな要望にお応えします。

Fluttter 3.3 で更新が告知された、Material 3 に対応したMedium とLarge のAppBarの
実装方法について解説します。

以下のようなAppBarを簡単に実装可能です。

ぜひ読んでみてください！

本記事ではMedium と Large の AppBarの実装に注目して解説を行います。
Material 3での色の変化等には触れませんので、ご了承ください。

Medium & Large のAppBarとは
実装方法
1. 準備
2. Medium & Large のAppBarの実装
まとめ
参考
編集後記（2022/9/21）

Medium & Large のAppBarとは

Medium & Large のAppBarとは、Material 3 で新たにタイプ分けされた、
AppBarのタイプとなります。

タイトルが一段下がった部分にあるAppBarで、
スクロール時にはタイトルが通常のAppBar同様に、
AppBarの中心に移動します。

詳細は以下のページをご覧ください。

Top app bar – Material Design 3

Top app bars display information and actions at the top of a screen, such as the page headline and shortcuts to actions like search and the overflow menu.

実装方法

準備

ベースとなるアプリのコードは以下となります。

ベースコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AppBarSample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            title: Text('AppBar Sample'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 48,
                  color: index.isEven ? Colors.white : Colors.black12,
                  child: Center(
                    child: Text(
                      'list item $index',
                      style: const TextStyle(fontSize: 24),
                    ),
                  ),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

Medium & Large のAppBarの実装には、SliverAppBarを用います。

そのため、リストをCustomScrollViewで囲み、SliverAppBarを使用して記述しています。

Medium & Large のAppBarの実装

Medium & Large のAppBarの実装方法は、
SliverAppBarをSliverAppBar.medium, SliverAppBar.largeにそれぞれ変えるだけです。

        slivers: <Widget>[
          SliverAppBar.large(
            title: const Text('AppBar Sample'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 48,
                  color: index.isEven ? Colors.white : Colors.black12,
                  child: Center(
                    child: Text(
                      'list item $index',
                      style: const TextStyle(fontSize: 24),
                    ),
                  ),
                );
              },
              childCount: 100,
            ),
          ),
        ],

これだけで、以下のGIFのような挙動をする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 MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AppBarSample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar.large(
            title: const Text('AppBar Sample'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 48,
                  color: index.isEven ? Colors.white : Colors.black12,
                  child: Center(
                    child: Text(
                      'list item $index',
                      style: const TextStyle(fontSize: 24),
                    ),
                  ),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}