Comment centrer le titre d'une barre d'applications

J'essaie de centrer le texte du titre dans une barre d'application qui a à la fois des actions de début et de 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 le montre cette image:

Alors que j'essaie d'inclure le titre au centre, il semble qu'il 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.
  );
}

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

Centrer le titre est la valeur par défaut sur iOS. Sur Android, le AppBartitre de la valeur par défaut est aligné à gauche, mais vous pouvez le remplacer en le passant centerTitle: truecomme argument auAppBar constructeur.

Exemple:

AppBar(
  centerTitle: true, // this is all you need
  ...
)

J'ai eu le même problème et cela a finalement fonctionné lorsque 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,
        ],
      ),
    );
  }

Dans mon cas, je voulais avoir un logo / image centré au lieu d'un texte. Dans ce cas, ce centerTitlen'est pas suffisant (je ne sais pas pourquoi, j'ai un fichier svg, c'est peut-être la raison ...), donc par exemple, ceci:

appBar: AppBar(centerTitle: true, title: AppImages.logoSvg)

ne centrera pas vraiment l'image (plus l'image peut être trop grande, etc.). Ce qui fonctionne bien pour moi, c'est un code comme celui-ci:

appBar: AppBar(centerTitle: true,
    title: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 35, maxWidth: 200),
        child: AppImages.logoSvg)),

Voici comment créer centerTitle sur ma barre d'applications:

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

Après avoir essayé de nombreuses solutions, cela m'a aidé à centerTitle: true ajouter un exemple de code en plus de la réponse @Collin Jackson

Exemple enbuild(BuildContext context)

fais ça

appBar: 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: Text(widget.title),centerTitle: true
      ),

Voici une approche différente si vous souhaitez créer un titre de barre d'application personnalisé. Par exemple, vous voulez une image et un texte au centre de la barre d'application, 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 Rowavec MainAxisAlignment.centerpour centrer les enfants. Ensuite, nous avons ajouté deux enfants - une icône et une Containeravec du texte. J'ai enveloppé le Textwidget dans le Containerpour ajouter le rembourrage nécessaire.

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Title'),
            actions: <Widget> [
               IconButton(icon: const Icon(Icons.file_upload), onPressed: _pressed),
            ],
            leading: IconButton(icon: const Icon(Icons.list), onPressed: _pressed),
            centerTitle: true,
        )
        body: Text("Content"),
    );
}

Cela peut aider à créer le texte du titre de la barre d'applications dans le centre. Vous pouvez choisir d'ajouter les styles souhaités à l'aide de Style ou de les commenter si cela n'est pas nécessaire.

appBar: AppBar(
          title:  const Center(
            child: Text(
              "App Title",
              style: TextStyle( color: Colors.white,fontSize: 20),
            ),
          ),
        ),

Sur l'affichage de l'application:

Vous pouvez centrer le titre d'une appBar à l'aide de centerTitle paramètre.

centerTitle est un type de données booléen et la valeur par défaut est False.

centerTitle : vrai

Exemple :

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Title'),
          backgroundColor: Colors.red,
          centerTitle: true,
        ),
      ),
    ),
  );
}

appbar: AppBar (centerTitle: true, title: Text ("HELLO"))

Utiliser un Centerobjet

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

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)