So zentrieren Sie den Titel einer App-Leiste

110

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:

TITEL LINKS

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

TITEL NICHT GUT ZENTRIERT

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

Christian
quelle

Antworten:

290

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
  ...
)
Collin Jackson
quelle
5
In diesem Fall erscheint der Titel nicht genau in der Mitte: /
Dies wirkt sich für mich nicht einmal auf die Ausrichtung des Titels aus.
Michael Tolsma
12

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

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(),
      ),
   ) 
);
}
Wildan Pratama
quelle
8

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)),
Simon Mourier
quelle
Die akzeptierte Antwort funktioniert für Text, dies ist jedoch die richtige Antwort für benutzerdefinierte Widgets. Vielen Dank!
sfratini
Hat für mich gearbeitet! Es scheint, dass centerTitle nicht richtig funktioniert, wenn Aktionen in der Symbolleiste vorhanden sind. Dieser hat es behoben.
Moti Bartov
Hat für mich keinen anderen Effekt als die einfachere Lösung. In meinem Fall führt ein transparenter Rand um das Bild zu einer falschen Platzierung. Wenn Sie das Bild einfach etwas enger schneiden, funktioniert die einfache Lösung.
Rgisi
1
@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"),
    );
}
Saman Missaghian
quelle
1

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
      ),
Schneller Lerner
quelle
1
Es ist eine Weile her, dies hat das Problem gelöst. Sehr einfach. Danke dir.
Ravimaran
1

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.

Annsh Singh
quelle
0

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:

Geben Sie hier die Bildbeschreibung ein

Rahul Shyokand
quelle
-3

Verwenden CenterObjekt

    appBar: AppBar(
      title: Center(
        child: const Text('Title Centered')
      )
    )
Andrei Todorut
quelle
-3
appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)
Issa
quelle