Flutter: Establecer la altura de la AppBar


105

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

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


@Mans Se trata de 'obtener' la altura del AppBar, no de 'configurarlo'.
Buğra Ekuklu

1
¿Echaste un vistazo a esto ? También puede crear su propio widget como AppBar y establecer su altura.
Bostrot

@Leviathlon mi mal. verifique mi respuesta para (con suerte) una mejor ayuda
Mans

Respuestas:


196

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

5
Esto aumenta el tamaño de la AppBar, pero no centra el texto.
Duncan Jones

5
Puede utilizar la centerTitlepropiedad para centrarla.
CopsOnRoad

11
@CopsOnRoad Eso lo centra horizontalmente pero no lo centra verticalmente.
Giraldi

1
@Giraldi Realmente no puedes hacer eso sin cambiar el archivo fuente o crear tu personalizadoAppBar
CopsOnRoad

1
@CopsOnRoad Lo sé, pero solo estaba señalando lo que pide el OP.
Giraldi

43

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 .


¡Esta debería ser una respuesta aceptada! Muchas gracias.
Hazaaa

14

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

9

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


4

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.


pero SafeAreaes para reducir la altura de la barra de estado, pero lo agregaste de nuevo con MediaQuery.of(context).padding.top? Creo que SafeArea no se necesita aquí.
Ryde

@Ryde The SafeAreaes importante para que la barra de la aplicación no se superponga con la barra de estado, pero en MediaQuery.of(context).padding.toprealidad no es necesario. He editado la respuesta, gracias.
TN888

-10

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!

Imagen de muestra

Imagen de muestra


1
Esto no es lo que pidió. Quiere que el título esté centrado verticalmente
Rémi Rousselet

centerTitle: verdadero; se puede utilizar para hacerlo.
goops17

centro vertical, no horizontal
Rémi Rousselet

Entonces no lee nueva altura. Sin embargo, no creo que modificar el archivo fuente como app_bar.dart para cambiarlo sea una buena idea.
goops17

6
Es una muy mala idea editar las fuentes de un marco. Romperá su aplicación si actualiza el marco.
Konstantin
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.