🍎

【Flutter】AppBarの高さを変更する方法

2023/07/04に公開

Flutter

やり方

今回は開発プロジェクトで独自のAppBarを作成する例で解説します。

AppBarの高さを設定する場合、そのクラスに対して「with PreferredSizeWidget」と記載します。
getメソッドのpreferredSizeをオーバーライドし、Size.fromHeitht()の引数に高さを指定します。

今回の場合ですと、AppBarの高さは44となります。

pjt_app_bar.dart

import 'package:flutter/material.dart';

class PjtAppBar extends StatelessWidget with PreferredSizeWidget {
  const PjtAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('AppBar'),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(44);
}

withとは

withとは、クラスが他のクラスの一部の機能を再利用するための仕組みです。

具体例

class Work {
  void housework() => print('家事をします');
  void work() => print('仕事をします');
}

class Human with Work {}

void main() {
  final human = Human();
  human.housework();
  human.work();
}

実行結果

家事をします
仕事をします

上記のように、HumanクラスにWorkをwithすることで、HumanクラスではWorkクラスのメソッド「housework」と「work」を使うことができるようになります。

上記のAppBarの例ですと、PjtAppBarクラスにPreferredSizeWidgetをwithすることで、PjtAppBarクラスでpreferredSizeメソッドを使うことができるようになり、そのメソッドの処理を変更することができます。
今回の場合ですと、preferredSizeメソッドの返却値を「const Size.fromHeight(44)」に変更しています。

PreferredSizeWidgetとは

このウィジェットが優先するサイズを返すことができるウィジェット用のインターフェイスです。
要は、PreferredSizeWidgetをwithすることで、ウィジェットのサイズを制御することができます。
今回の例ですと、AppBarの高さを変更するために、PreferredSizeWidgetを使用しています。

やり方

withとは

PreferredSizeWidgetとは

Discussion