Flutter:AppBarの高さを設定する


110

AppBarフラッターの高さを簡単に設定するにはどうすればよいですか?

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


@Mansそれは、高さをAppBar設定するのではなく、高さを取得することです。
BuğraEkuklu

1
これを見ましか?独自のウィジェットをAppBarとして作成し、その高さを設定することもできます。
Bostrot

@Leviathlon私の悪い。(うまくいけば)いくつかのより良い助けのために私の答えをチェックしてください
マン

回答:


208

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

5
これにより、AppBarのサイズが大きくなりますが、テキストは中央に配置されません。
ダンカンジョーンズ

5
centerTitleプロパティを使用して中央に配置できます。
CopsOnRoad 2018

11
@CopsOnRoad水平方向に中央揃えされますが、垂直方向には中央揃えされません。
Giraldi

1
@Giraldiあなたは本当にあなたのカスタムソースファイルを変更したり、作成せずにそれを行うことはできませんAppBar
CopsOnRoad

1
@CopsOnRoad私は知っていますが、OPが何を求めているかを指摘していました。
Giraldi

46

あなたはPreferredSizeそれのflexibleSpaceために使うことができます:

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

このようelevationAppBarして、影を表示し続けるためのを維持し、カスタムの高さを設定できます。これは私が探していたものです。SomeWidgetただし、間隔をで設定する必要があります。


これは受け入れられるべき答えです!どうもありがとうございました。
Hazaaa

14

これを書いている時点では、私は気づいていませんでしたPreferredSize。シンの答えはこれを達成するためにより良いです。

カスタムの高さで独自のカスタムウィジェットを作成できます。

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

10

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

標準の代わりに使用します


4

シンの答えは素晴らしいですが、それには1つ問題があります。

PreferredSizeウィジェットには、ステータスバーの会計処理せずに、画面の上部にすぐに開始されますので、その高さの一部には、ステータスバーの高さの陰になります。これはサイドノッチも説明します。

解決策preferredSizeの子をSafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

のflexibleSpaceプロパティを使用したくない場合は、他のプロパティがAppBarステータスバーを自動的に説明するため、その必要はありません。


しかしSafeArea、ステータスバーの高さを減らすことですが、それでもあなたはそれをMediaQuery.of(context).padding.top?ここではSafeAreaは必要ないと思います。
ライド

@RydeアプリバーSafeAreaがステータスバーと重ならないようにするために重要ですが、MediaQuery.of(context).padding.top実際には必要ありません。答えを編集しました、ありがとう。
TN8 8820

1

AppbarのtoolbarHeightプロパティを使用でき、それはまさにあなたが望むことをします。


0

使用toolbarHeight

ここに画像の説明を入力してください


を使用する必要はもうありませんPreferredSizetoolbarHeightと一緒に使用しflexibleSpaceます。

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)

-10

Visual Codeを使用している場合は、Ctrlキーを押しながらAppBar関数をクリックします。

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

そして、この作品を編集します。

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

高さの違い!

サンプル画像

サンプル画像


1
これは彼が求めたものではありません。彼はタイトルが縦方向にセンタリングしたい
レミRousselet

centerTitle:true; それを行うために使用することができます。
goops 1718年

垂直中心、水平でない
レミRousselet

したがって、新しい高さは読み取られません。app_bar.dartのようなソースファイルを変更するためにいじくり回すのは良い考えではないと思います。
goops 1718年

6
フレームワークのソースを編集することは非常に悪い考えです。フレームワークを更新すると、アプリが破損します。
コンスタンチン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.