[flutter] 앱바 제목을 중앙에 배치하는 방법

선행 및 후행 동작이 모두있는 앱 바의 제목 텍스트를 중앙에 배치하려고합니다.

@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충분하지 않습니다 (왜, 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(),
      ),
   ) 
);
}

답변

많은 솔루션을 시도한 후 @Collin Jackson 답변 centerTitle: true
외에도 샘플 코드를 추가하는 데 도움이되었습니다.

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

          ),
  )

여기에서 우리는 아이들을 센터링하기 위해 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"),
    );
}