Bir uygulama çubuğunun başlığı nasıl ortalanır

Başlık metnini hem önde gelen hem de takip eden eylemleri olan bir uygulama çubuğunda ortalamaya çalışıyorum.

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

Bu, bu resimde gösterildiği gibi başlığın sola hizalanması dışında iyi çalışır:

Başlığı merkeze eklemeye çalıştığımda, çok fazla solda görünüyor:

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

Başlık metnini 2 simge arasında mükemmel bir şekilde ortalamak için bir çözüm olmasını isterim.

Başlığı ortalamak, iOS'ta varsayılandır. Android'de, AppBarbaşlığı varsayılan olarak sola hizalıdır, ancak yapıcıya centerTitle: trueargüman olarak ileterek bunu geçersiz kılabilirsiniz AppBar.

Misal:

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

Aynı sorunu yaşadım ve sonunda
mainAxisSize: MainAxisSize.min'i Row widget'ıma eklediğimde çalıştı . Umarım bu yardımcı olur!

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

Benim durumumda, bir metin yerine ortalanmış bir logo / resim olmasını istedim. Bu durumda, centerTitleyeterli değil (neden emin değilim, bir svg dosyam var, belki sebebi budur ...), yani örneğin, bu:

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

görüntüyü gerçekten ortalamayacaktır (ayrıca görüntü çok büyük olabilir, vb.). Benim için işe yarayan şey şuna benzer bir koddur:

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

Uygulama çubuğumda centerTitle'ı şu şekilde yaparım:

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

Birçok çözümü denedikten sonra bu centerTitle: true , @ Collin Jackson yanıtına ek olarak örnek kod eklememe yardımcı oldu

Örnek olarakbuild(BuildContext context)

Bunu yap

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

Özel bir uygulama çubuğu başlığı oluşturmak istiyorsanız işte farklı bir yaklaşım. Örneğin, uygulama çubuğunun ortasında bir resim ve bir metin istiyorsanız, ardından

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

          ),
  )

Burada bir Rowile oluşturdukMainAxisAlignment.center çocukları merkezlemek için . Sonra iki çocuk ekledik - Bir Simge ve bir Containermetin içeren. Ben sarılmış Textwidget Containergerekli dolgu ekleyin.

@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 kullanarak bir appBar başlığını ortalayabilirsiniz parametresini .

centerTitle , Boolean Veri ve varsayılan değer .

centerTitle : true

Misal :

import 'package:flutter/material.dart';

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

appbar: AppBar (centerTitle: true, title: Metin ("MERHABA"))

appBar'ın başlık merkezi şovu için kendi bool koşulu vardır,

öyleyse, eğer doğruyu ayarlarsan

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

daha sonra merkez olacak, sonra varsayılan sola hizala (android'de) ios set center (varsayılan olarak).

Bu, Appbar Başlık Metninin Merkezde oluşturulmasına yardımcı olabilir. Stili kullanarak istediğiniz Stilleri eklemeyi seçebilir veya gerekmiyorsa yorum yapabilirsiniz.

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

Uygulama Ekranında:

CenterNesne kullan

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

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)