วิธีจัดกึ่งกลางชื่อของแถบแอป

ฉันกำลังพยายามจัดข้อความชื่อเรื่องให้อยู่กึ่งกลางในแถบแอปที่มีทั้งการดำเนินการนำหน้าและต่อท้าย

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

ฉันชอบวิธีแก้ปัญหาเพื่อให้ข้อความชื่ออยู่ตรงกลางระหว่าง 2 ไอคอน

การจัดกึ่งกลางชื่อเป็นค่าเริ่มต้นบน 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นี้ไม่เพียงพอ (ไม่แน่ใจว่าทำไมฉันมีไฟล์ svg นั่นอาจเป็นเหตุผล ... ) ดังนั้นสิ่งนี้:

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

จะไม่อยู่ตรงกลางของภาพ (รวมทั้งภาพอาจใหญ่เกินไป ฯลฯ ) สิ่งที่ใช้ได้ดีสำหรับฉันคือรหัสแบบนี้:

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

นี่คือวิธีที่ฉันสร้าง 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: 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(
          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'))
            ],

          ),
  )

ที่นี่เราได้สร้างRowด้วย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"),
    );
}

คุณสามารถจัดกึ่งกลางชื่อของ appBar ได้โดยใช้พารามิเตอร์centerTitle

centerTitleคือ Boolean Datatypeและค่าเริ่มต้นคือ False

centerTitle : จริง

ตัวอย่าง:

import 'package:flutter/material.dart';

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

แถบแอป: AppBar (centerTitle: true, title: Text ("HELLO"))

appBar มีเงื่อนไขบูลของตัวเองสำหรับการแสดงไตเติ้ลเซ็นเตอร์หรือไม่

ดังนั้นหากคุณตั้งค่าเป็นจริง

  appBar: AppBar(
    title: Text(
      "header Text",
      style: TextStyle(color: Colors.black),
    ),
    centerTitle: true,
  ),

จากนั้นจะเป็นศูนย์กลางอื่น ๆ จากนั้นจัดชิดซ้ายเริ่มต้น (ใน Android) ศูนย์ตั้งค่า iOS

สิ่งนี้สามารถช่วยในการสร้างข้อความชื่อเรื่องของ 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,
)