web-dev-qa-db-fra.com

Flutter: Réglage de la hauteur de la barre d’application

Comment puis-je simplement régler la hauteur de la AppBar dans Flutter?

Le titre de la barre doit rester centré verticalement (en cela AppBar).

dartmaterial-designflutter
26
Leviathlon

Vous pouvez utiliser 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: // ...
      )
    );
  }
}
58
Cinn

Vous pouvez utiliser PreferredSize et flexibleSpace pour cela:

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

De cette façon, vous pouvez garder la elevation de AppBar pour garder son ombre visible et avoir une hauteur personnalisée, ce que je cherchais juste. Vous devez toutefois définir l'espacement dans SomeWidget.

13
footurist

Au moment d'écrire ceci, je n'étais pas au courant de PreferredSize. La réponse de Cinn est préférable pour y parvenir.

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

En plus de la réponse de @ Cinn, vous pouvez définir une classe comme celle-ci.

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

ou de cette façon

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

et ensuite l'utiliser au lieu d'un standard

3
Pavel