flutterでAppbarのheightを変更する
Intoroduce
お久しぶりの投稿です。
最近、flutterをはじめましたー。脱インフラのみエンジニア目指してます。
今回はflutterでAppbarのheightカスタマイズする方法を紹介します。
完成イメージはこちらです。
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の高さを指定します。
このままだとAppbarのtitleがもとのAppbarの高さを見ているので、Appbarのtitleには設定せず、ContainerとCenter Widgetを使用してtitleをAppbarの真ん中に表示します。
コードはこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(title: 'Aspace'), ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: PreferredSize( preferredSize: Size.fromHeight(220.0), child: AppBar( automaticallyImplyLeading: false, centerTitle: true, elevation: 0.0, flexibleSpace: Container( child: Center( child: Text( title, style: TextStyle(fontSize: 60), ))))), body: Center( child: Text("Hello"), )); } } |
これで最初の画像のようにアプリが変更されました！
では、良きflutterライフを！