web-dev-qa-db-fra.com

Comment centrer le titre d'une appbar

J'essaie de centrer le texte du titre dans une barre d'application comportant à la fois une action en tête et une fin.

@override
Widget build(BuildContext context) {
  final menuButton = new PopupMenuButton<int>(
    onSelected: (int i) {},
    itemBuilder: (BuildContext ctx) {},
    child: new Icon(
      Icons.dashboard,
    ),
  );

  return new Scaffold(
    appBar: new AppBar(
      // Here we take the value from the MyHomePage object that
      // was created by the App.build method, and use it to set
      // our appbar title.
      title: new Text(widget.title, textAlign: TextAlign.center),
      leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
      ),
      actions: [
        menuButton,
      ],
    ),
    body: new Center(
      child: new Text(
        'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

Cela fonctionne bien, sauf que le titre est aligné à gauche, comme indiqué sur cette image:

TITLE TO THE LEFT

En essayant d'inclure le titre au centre, il semble que ce soit trop à gauche:

@override
Widget build(BuildContext context) {
  final menuButton = new PopupMenuButton<int>(
    onSelected: (int i) {},
    itemBuilder: (BuildContext ctx) {},
    child: new Icon(
      Icons.dashboard,
    ),
  );

  return new Scaffold(
    appBar: new AppBar(
      // Here we take the value from the MyHomePage object that
      // was created by the App.build method, and use it to set
      // our appbar title.
      title: new Center(child: new Text(widget.title, textAlign: TextAlign.center)),
      leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
      ),
      actions: [
        menuButton,
      ],
    ),
    body: new Center(
      child: new Text(
        'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

TITLE NOT WELL CENTERED

J'aimerais une solution pour que le texte du titre soit parfaitement centré entre les 2 icônes. Merci beaucoup,

flutter
17
Christian

Le centrage du titre est la valeur par défaut sur iOS. Sous Android, le titre de AppBar est aligné à gauche par défaut, mais vous pouvez le remplacer en transmettant centerTitle: true en tant qu'argument au constructeur AppBar.

49
Collin Jackson

voici comment je fais centerTitle sur mon appbar: 

` @override
Widget build(BuildContext context) {
return Scaffold(
  appBar: new AppBar(
    centerTitle: true ,
    title: new Text("Login"),
  ),
  body: new Container(
    padding: EdgeInsets.all(18.0),
      key: formkey,
        child: ListView(
        children: buildInputs() + buildSubmitButton(),
      ),
   ) 
);

} ` 

3
Wildan Pratama

J'ai eu le même problème et cela a finalement fonctionné quand j'ai ajouté le
mainAxisSize: MainAxisSize.min à mon widget Row. J'espère que ça aide! 

 return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that
        // was created by the App.build method, and use it to set
        // our appbar title.
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              widget.title,
            ),
          ],
        ),

        leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
        ),
        actions: [
          menuButton,
        ],
      ),
    );
  }
0
annalaufey

Voici une approche différente si vous souhaitez créer un titre de barre d'applications personnalisé. Par exemple, vous voulez une image et un texte au centre de la barre d’applications, puis ajoutez -

appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.your_app_icon,
                color: Colors.green[500],
              ),
              Container(
                  padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
            ],

          ),
  )

Ici, nous avons créé un Row avec MainAxisAlignment.center pour centrer les enfants. Ensuite, nous avons ajouté deux enfants - une icône et un conteneur avec texte. J'ai enveloppé le widget Texte dans le conteneur pour ajouter le remplissage nécessaire.

J'espère que cela t'aides.

0
Annsh Singh

Utiliser l'objet Center

    appBar: AppBar(
      title: Center(
        child: const Text('Title Centered')
      )
    )
0
Andrei Todorut