Flutter: Définition de la hauteur de l'AppBar

Question

Comment puis-je simplement définir la hauteur de la AppBar dans Flutter?

Le titre de la barre doit rester centré verticalement (dans cette AppBar).

Answer 1

Vous pouvez utiliser PreferredSize:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Exemple',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // ici la hauteur désirée
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

Answer 2

Vous pouvez utiliser PreferredSize et flexibleSpace pour cela:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // cache le widget de départ
    flexibleSpace: SomeWidget(),
  )
),

De cette façon, vous pouvez conserver l'élévation de l'AppBar pour maintenir son ombre visible et avoir une hauteur personnalisée, ce que je recherchais. Vous devez cependant définir l'espacement dans SomeWidget.

Answer 3

Au moment de rédiger ceci, je n'étais pas au courant de PreferredSize. La réponse de Cinn est meilleure pour réaliser ceci.

Vous pouvez créer votre propre widget personnalisé avec une hauteur personnalisée :

import "package:flutter/material.dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : [new CustomAppBar("Barre d'application personnalisée"), new Container()],);
  }
}

class CustomAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0; // changez cela pour des hauteurs différentes 

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

Answer 4

En plus de la réponse de @Cinn, vous pouvez définir une classe de cette manière

class MyAppBar extends AppBar avec PreferredSizeWidget {
  @override
  get preferredSize => Size.fromHeight(50);

  MyAppBar({Key key, Widget title}) : super(
    key: key,
    title: title,
    // peut-être d'autres propriétés de AppBar
  );
}

ou de cette manière

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // peut-être d'autres propriétés de AppBar
    ),
  );
}

et ensuite l'utiliser à la place de celui standard

Answer 5

Si vous êtes dans Visual Code, Ctrl + Click sur la fonction AppBar.

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

Et modifiez ce morceau.

app_bar.dart s'ouvrira et vous pourrez trouver 
preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

Différence de hauteur!