web-dev-qa-db-ja.com

Flutter：AppBarの高さを設定する

FlutterでAppBarの高さを設定するにはどうすればよいですか？

バーのタイトルは、垂直方向の中央に配置する必要があります（AppBar）。

dartmaterial-designflutter
26
Leviathlon

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: // ...
      )
    );
  }
}
58
Cinn

PreferredSizeとflexibleSpaceを使用できます：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

このようにして、elevation of AppBarを保持して、影を表示し、カスタムの高さを保持することができます。これは私が探していたものです。ただし、SomeWidgetで間隔を設定する必要があります。

13
footurist

これを書いている時点では、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),
        ),
      ),
    );
  }
}
6
Mans

@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
    ),
  );
}

そして、標準のものの代わりにそれを使用します

3
Pavel