ऐपबार के शीर्षक को कैसे केंद्र में रखा जाए

Question

मैं एक ऐप बार में शीर्षक पाठ को केंद्र में रखने की कोशिश कर रहा हूं जिसमें एक अग्रणी और अनुगामी दोनों क्रियाएं हैं।

@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 आइकनों के बीच पूरी तरह से केंद्रित करने के लिए एक समाधान पसंद करूंगा।

Answer 1

शीर्षक को केंद्रित करना iOS पर डिफ़ॉल्ट है। एंड्रॉइड पर, AppBarशीर्षक शीर्षक बाएं-संरेखित करने के लिए चूक करता है, लेकिन आप इसे कंस्ट्रक्टर के centerTitle: trueतर्क के रूप में पारित कर सकते हैं AppBar।

उदाहरण:

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

Comments

इस मामले में शीर्षक केंद्र में बिल्कुल नहीं दिखता है: /

यह मेरे लिए शीर्षक के संरेखण को भी प्रभावित नहीं करता है।

— माइकल टॉल्स्मा

Answer 2

मैं एक ही समस्या थी और यह अंततः काम किया जब मैंने
mainAxisSize: MainAxisSize.min को अपने रो विजेट में जोड़ा । आशा है कि ये आपकी मदद करेगा!

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

Answer 3

मेरे मामले में मैं एक पाठ के बजाय एक लोगो / छवि केंद्रित करना चाहता था। इस मामले में, centerTitleपर्याप्त नहीं है (निश्चित नहीं कि क्यों, मेरे पास एक svg फ़ाइल है, शायद यही कारण है ...), इसलिए उदाहरण के लिए, यह:

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

वास्तव में छवि को केंद्र नहीं करेगा (प्लस छवि बहुत बड़ी हो सकती है, आदि)। मेरे लिए क्या अच्छा काम करता है एक कोड इस तरह है:

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

Comments

स्वीकृत उत्तर पाठ के लिए काम करता है लेकिन यह कस्टम विजेट के लिए सही उत्तर है। धन्यवाद!

— सिरफेटिनी

मेरे लिए काम किया! ऐसा लगता है कि जब टूलबार पर कार्य होते हैं तो केंद्र केंद्र ठीक से काम नहीं करता है। यह एक तय किया।

— मोती बार्टोव

अधिक सरल समाधान की तुलना में मेरे लिए कोई अन्य प्रभाव नहीं है। मेरे मामले में, छवि के चारों ओर पारदर्शी बॉर्डर स्पेस होने से गलत प्लेसमेंट होता है। बस छवि को थोड़ा तंग करने से सरल समाधान काम हो गया।

— rgisi

Answer 4

यहां बताया गया है कि मैं अपने ऐपबार पर कैसे केंद्र बनाता हूं:

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

Answer 5

कई समाधानों की कोशिश करने के बाद इसने मुझे @Collin जैक्सन जवाब के 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
      ),

Comments

थोड़ी देर हो गई, इससे मसला हल हो गया। बहुत आसान। धन्यवाद।

— रविरंजन

Answer 6

यदि आप एक कस्टम ऐप बार शीर्षक बनाना चाहते हैं तो यहां एक अलग तरीका है। उदाहरण के लिए आप ऐप बार के केंद्र में एक छवि और एक पाठ चाहते हैं, फिर जोड़ें

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।

Answer 7

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

Answer 8

इससे Appbar Title Text in Center बनाने में मदद मिल सकती है। आप स्टाइल का उपयोग करके अपनी इच्छित शैलियाँ जोड़ना चुन सकते हैं या ज़रूरत न होने पर टिप्पणी कर सकते हैं।

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

एप्लिकेशन प्रदर्शन पर:

Answer 9

आप CenterTitle पैरामीटर का उपयोग करके एक appBar के शीर्षक को केंद्रित कर सकते हैं।

CenterTitle बूलियन डेटाटाइप है, और डिफ़ॉल्ट मान गलत है।

centerTitle : सच है

उदाहरण :

import 'package:flutter/material.dart';

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

Answer 10

appbar: AppBar (केंद्र शीर्षक: सत्य, शीर्षक: पाठ ("हेलो"))

Answer 11

Centerवस्तु का उपयोग करें

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

Answer 12

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)