如何将应用栏标题居中

我正在尝试将标题文本放在具有前后动作的应用栏中。

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

如图所示，除了标题在左侧对齐之外，此方法效果很好：

当我尝试在标题中添加标题时，似乎标题太多了：

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

我希望找到一种解决方案，以使标题文本在两个图标之间完美居中。

标题居中是iOS上的默认设置。在Android上，AppBar的标题默认为左对齐，但是您可以通过将其centerTitle: true作为参数传递给AppBar构造函数来覆盖它。

例：

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

我遇到了同样的问题，当我将
mainAxisSize：MainAxisSize.min添加到我的Row小部件时，它终于可以工作了。我希望这有帮助！

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

这是我在应用栏上设置centerTitle的方法：

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

就我而言，我希望徽标/图像居中而不是文本。在这种情况下，centerTitle这还不够（不知道为什么，我有一个svg文件，也许就是原因...），因此，例如：

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

不会真正使图像居中（加上图像可能太大，等等）。对我来说很好的是这样的代码：

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

如果您要创建自定义应用栏标题，则采用另一种方法。例如，您想要在应用程序栏的中心放置图片和文本，然后添加

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

          ),
  )

在这里，我们创建了一个Rowwith MainAxisAlignment.center以将孩子居中。然后，我们添加了两个子对象-图标和Container带有文本的。我在中包装了Text小部件Container以添加必要的填充。

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

在尝试了许多解决方案之后，这帮助我centerTitle: true 在@Collin Jackson答案之外添加了示例代码

例子 中build(BuildContext context)

做这个

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

这有助于在中心制作Appbar标题文本。您可以选择使用样式添加所需的样式，或者在不需要时对其进行注释。

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

在应用程序上显示：

使用Center对象

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

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)