Cách căn giữa tiêu đề của thanh ứng dụng

Tôi đang cố căn giữa văn bản tiêu đề trong thanh ứng dụng có cả hành động ở đầu và ở cuối.

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

Điều này hoạt động tốt ngoại trừ tiêu đề được căn chỉnh ở bên trái như được hiển thị trong hình này:

Khi tôi cố gắng đưa tiêu đề vào trung tâm, có vẻ như nó quá nhiều về bên trái:

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

Tôi rất thích một giải pháp để lấy văn bản tiêu đề chính giữa hoàn hảo giữa 2 biểu tượng.

Căn giữa tiêu đề là mặc định trên iOS. Trên Android, AppBartiêu đề của được mặc định là căn trái, nhưng bạn có thể ghi đè nó bằng cách chuyển nó centerTitle: truelàm đối số cho hàm AppBartạo.

Thí dụ:

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

Tôi gặp vấn đề tương tự và cuối cùng nó đã hoạt động khi tôi thêm
mainAxisSize: MainAxisSize.min vào tiện ích Row của tôi. Tôi hi vọng cái này giúp được!

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

Đây là cách tôi tạo centerTitle trên thanh ứng dụng của mình:

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

Trong trường hợp của tôi, tôi muốn đặt biểu trưng / hình ảnh ở giữa thay vì văn bản. Trong trường hợp này, centerTitlelà không đủ (không rõ tại sao, tôi có tệp svg, có thể đó là lý do ...), vì vậy, ví dụ: thế này:

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

sẽ không thực sự căn giữa hình ảnh (cộng với hình ảnh có thể quá lớn, v.v.). Những gì hoạt động tốt cho tôi là một mã như thế này:

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

Đây là một cách tiếp cận khác nếu bạn muốn tạo tiêu đề thanh ứng dụng tùy chỉnh. Ví dụ: bạn muốn một hình ảnh và một văn bản ở giữa thanh ứng dụng, sau đó thêm

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

          ),
  )

Ở đây chúng ta đã tạo ra một Rowvới MainAxisAlignment.centerđến trung tâm trẻ em. Sau đó, chúng tôi đã thêm hai con - một Biểu tượng và một Containercó văn bản. Tôi quấn Textwidget vào Containerđể thêm phần đệm cần thiết.

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

Sau khi thử nhiều giải pháp, điều này đã giúp tôi centerTitle: true thêm mã mẫu ngoài câu trả lời @Collin Jackson

Ví dụ trongbuild(BuildContext context)

làm cái này

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

Điều này có thể giúp tạo Văn bản Tiêu đề Thanh ứng dụng ở Trung tâm. Bạn có thể chọn thêm các Kiểu mong muốn bằng cách sử dụng Kiểu hoặc nhận xét nó nếu không cần thiết.

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

Trên màn hình ứng dụng:

Sử dụng Centerđối tượng

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

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)