Flutter: Establecer la altura de la AppBar

¿Cómo puedo simplemente establecer la altura del AppBaren Flutter?

El título de la barra debe permanecer centrado verticalmente (en eso AppBar).

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

Puede utilizar PreferredSizey flexibleSpacepara ello:

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

De esta manera, puede mantener el elevationde AppBarpara mantener su sombra visible y tener una altura personalizada, que es lo que estaba buscando. Sin SomeWidgetembargo, debe establecer el espaciado .

En el momento de escribir esto, no estaba al tanto PreferredSize. La respuesta de Cinn es mejor para lograrlo.

Puede crear su propio widget personalizado con una altura personalizada:

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

Además de la respuesta de @ Cinn, puede definir una clase como esta

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

o de esta manera

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

y luego utilícelo en lugar del estándar

La respuesta de Cinn es genial, pero hay algo malo en ello.

El PreferredSizewidget se iniciará inmediatamente en la parte superior de la pantalla, sin tener en cuenta la barra de estado, por lo que parte de su altura estará sombreada por la altura de la barra de estado. Esto también explica las muescas laterales.

La solución : envuelva al preferredSizeniño con unSafeArea

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

Si no quiere usar la propiedad flexibleSpace, entonces no hay necesidad de todo eso, porque las otras propiedades de la AppBartendrán en cuenta la barra de estado automáticamente.

Si está en Visual Code, presione Ctrl + clic en la función AppBar.

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

Y edita esta pieza.

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

¡Diferencia de altura!