So zentrieren Sie den Titel einer App-Leiste

Ich versuche, den Titeltext in einer App-Leiste zu zentrieren, die sowohl eine führende als auch eine nachfolgende Aktion enthält.

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

Dies funktioniert gut, außer dass der Titel links ausgerichtet ist, wie in diesem Bild gezeigt:

Wenn ich versuche, den Titel in die Mitte aufzunehmen, scheint es zu viel links zu sein:

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

Ich würde eine Lösung lieben, um den Titeltext perfekt zwischen den beiden Symbolen zu zentrieren.

Das Zentrieren des Titels ist die Standardeinstellung unter iOS. Unter Android wird der AppBarTitel des Links standardmäßig linksbündig angezeigt. Sie können ihn jedoch überschreiben, indem Sie ihn centerTitle: trueals Argument an den AppBarKonstruktor übergeben.

Beispiel:

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

Ich hatte das gleiche Problem und es funktionierte schließlich, als ich
meinem Zeilen- Widget die Datei mainAxisSize: MainAxisSize.min hinzufügte . Ich hoffe das hilft!

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

So mache ich centerTitle in meiner 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(),
      ),
   ) 
);
}

In meinem Fall wollte ich ein zentriertes Logo / Bild anstelle eines Textes. In diesem Fall centerTitleist das nicht genug (nicht sicher warum, ich habe eine SVG-Datei, vielleicht ist das der Grund ...), also zum Beispiel:

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

zentriert das Bild nicht wirklich (außerdem kann das Bild zu groß sein usw.). Was für mich gut funktioniert, ist ein Code wie dieser:

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

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

Nachdem ich viele Lösungen ausprobiert hatte, half mir dies centerTitle: true , zusätzlich zur Antwort von @Collin Jackson Beispielcode hinzuzufügen

Beispiel inbuild(BuildContext context)

mach das

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

Hier ist ein anderer Ansatz, wenn Sie einen benutzerdefinierten Titel in der App-Leiste erstellen möchten. Sie möchten beispielsweise ein Bild und einen Text in der Mitte der App-Leiste hinzufügen

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'))
            ],

          ),
  )

Hier haben wir ein Rowmit erstellt, MainAxisAlignment.centerum die Kinder zu zentrieren. Dann haben wir zwei Kinder hinzugefügt - Ein Symbol und ein Containermit Text. Ich habe das TextWidget in das eingewickelt Container, um die erforderliche Polsterung hinzuzufügen.

Dies kann beim Erstellen von Appbar-Titeltext in der Mitte hilfreich sein. Sie können Ihre gewünschten Stile mithilfe von Stil hinzufügen oder bei Bedarf kommentieren.

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

Auf App-Anzeige:

Verwenden CenterObjekt

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

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)