Flattern: Einstellen der Höhe der AppBar

Wie kann ich einfach die Höhe des AppBarin Flutter einstellen ?

Der Titel der Leiste sollte vertikal zentriert bleiben (darin AppBar).

Sie können PreferredSize verwenden :

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

Sie können PreferredSizeund flexibleSpacedafür verwenden:

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

Auf diese Weise können Sie das elevationvon AppBarbeibehalten, um den Schatten sichtbar zu halten, und eine benutzerdefinierte Höhe haben, nach der ich gerade gesucht habe. Sie müssen jedoch den Abstand einstellen SomeWidget.

Zum Zeitpunkt des Schreibens war mir dies nicht bewusst PreferredSize. Cinns Antwort ist besser, um dies zu erreichen.

Sie können Ihr eigenes benutzerdefiniertes Widget mit einer benutzerdefinierten Höhe erstellen:

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

Zusätzlich zu @ Cinns Antwort können Sie eine Klasse wie diese definieren

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

oder so

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

und dann verwenden Sie es anstelle von Standard

Cinns Antwort ist großartig, aber eines stimmt nicht.

Das PreferredSizeWidget wird sofort am oberen Bildschirmrand gestartet, ohne die Statusleiste zu berücksichtigen, sodass ein Teil seiner Höhe von der Höhe der Statusleiste überschattet wird. Dies erklärt auch die seitlichen Kerben.

Die Lösung : Wickeln Sie das preferredSizeKind mit einemSafeArea

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

Wenn Sie die flexibleSpace-Eigenschaft nicht verwenden möchten, ist dies alles nicht erforderlich, da die anderen Eigenschaften von AppBarautomatisch die Statusleiste berücksichtigen.

Wenn Sie sich in Visual Code befinden, drücken Sie Strg + Klicken Sie auf die AppBar-Funktion.

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

Und bearbeiten Sie dieses Stück.

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

Höhenunterschied!