flutter

flutterでAppbarのheightを変更する

Intoroduce

お久しぶりの投稿です。
最近、flutterをはじめましたー。脱インフラのみエンジニア目指してます。

今回はflutterでAppbarのheightカスタマイズする方法を紹介します。

完成イメージはこちらです。
flutter-appbar-2

Environment

  • MacOS Catalina 10.15.1
  • flutter --version
    Flutter 1.15.4-pre.240 • channel master • https://github.com/flutter/flutter.git
    Framework • revision 32b17974ea (28 hours ago) • 2020-02-29 06:41:00 -0500
    Engine • revision 755e2b559d
    Tools • Dart 2.8.0 (build 2.8.0-dev.10.0 09bbd3cca5)
  • Visual Studio Code

Usage

Appbarの高さを変更

PreferredSize Widgetを使用して、Appbarの高さを指定します。

PreferredSize class - widgets library - Dart API

このままだとAppbarのtitleがもとのAppbarの高さを見ているので、Appbarのtitleには設定せず、ContainerとCenter Widgetを使用してtitleをAppbarの真ん中に表示します。

コードはこちら。

これで最初の画像のようにアプリが変更されました!

では、良きflutterライフを!

-flutter
-,

Translate »