FlutterでAppBar
の高さを設定するにはどうすればよいですか?
バーのタイトルは、垂直方向の中央に配置する必要があります(AppBar
)。
PreferredSize を使用できます。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
home: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(50.0), // here the desired height
child: AppBar(
// ...
)
),
body: // ...
)
);
}
}
PreferredSize
とflexibleSpace
を使用できます:
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: SomeWidget(),
)
),
このようにして、elevation
of AppBar
を保持して、影を表示し、カスタムの高さを保持することができます。これは私が探していたものです。ただし、SomeWidget
で間隔を設定する必要があります。
これを書いている時点では、PreferredSize
に気づいていませんでした。これを達成するには、Cinnの答えが良いです。
カスタムの高さで独自のカスタムウィジェットを作成できます。
import "package:flutter/material.Dart";
class Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],);
}
}
class CustomAppBar extends StatelessWidget {
final String title;
final double barHeight = 50.0; // change this for different heights
CustomAppBar(this.title);
@override
Widget build(BuildContext context) {
final double statusbarHeight = MediaQuery
.of(context)
.padding
.top;
return new Container(
padding: new EdgeInsets.only(top: statusbarHeight),
height: statusbarHeight + barHeight,
child: new Center(
child: new Text(
title,
style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
);
}
}
@Cinnの答えに加えて、このようなクラスを定義できます
class MyAppBar extends AppBar with PreferredSizeWidget {
@override
get preferredSize => Size.fromHeight(50);
MyAppBar({Key key, Widget title}) : super(
key: key,
title: title,
// maybe other AppBar properties
);
}
またはこの方法
class MyAppBar extends PreferredSize {
MyAppBar({Key key, Widget title}) : super(
key: key,
preferredSize: Size.fromHeight(50),
child: AppBar(
title: title,
// maybe other AppBar properties
),
);
}
そして、標準のものの代わりにそれを使用します