मैं फ़्लटर में लंबवत और क्षैतिज रूप से पाठ कैसे केंद्र करूं?

Question

मैं यह जानना चाहता हूं कि एक टेक्स्ट विजेट की सामग्री को फ़्लटर में लंबवत और क्षैतिज रूप से कैसे केंद्रित किया जाए। मैं केवल Center(child: Text("test"))सामग्री का उपयोग कर विजेट को केंद्र में रखना जानता हूं, लेकिन खुद को नहीं। डिफ़ॉल्ट रूप से, यह बाईं ओर संरेखित है। Android में, मुझे विश्वास है कि एक TextView की संपत्ति जो इसे प्राप्त करती है उसे कहा जाता है gravity।

मुझे क्या चाहिए इसका उदाहरण:

Answer 1

पाठ संरेखण केंद्र गुण केवल क्षैतिज संरेखण सेटिंग।

मैंने पाठ को लंबवत और क्षैतिज रूप से केंद्र में सेट करने के लिए नीचे दिए गए कोड का उपयोग किया।

कोड:

      child: Center(
        child: Text(
          "Hello World",
          textAlign: TextAlign.center,
        ),
      ),

Comments

@ शालीन रूप से कुछ मामलों में यह आपको काम करने की आवश्यकता नहीं होगी: आप को जोड़ने के लिए आवश्यक है Colors.black, fontWeight: FontWeight.bold,))),),

— संजीव संगराल

मैंने देख लिया और मान गया। इसे सही उत्तर में बदल दिया गया है क्योंकि यह क्षैतिज और लंबवत रूप से केंद्र बनाता है।

— जेरेन-मीजेर

Answer 2

आप कंस्ट्रक्टर की TextAlignसंपत्ति का उपयोग कर सकते हैं Text।

Text("text", textAlign: TextAlign.center,)

Comments

मुझे यकीन नहीं है कि यह उत्तर के रूप में क्यों चिह्नित किया गया था, क्योंकि यह केवल पाठ को क्षैतिज रूप से केंद्र बनाता है, लेकिन प्रश्न क्षैतिज और लंबवत रूप से पूछता है ।

— हेरोहट्टर

हाँ, इसे हटा दिया जाना चाहिए, यह प्रश्न का उत्तर नहीं देता है।

— हसन

Answer 3

मुझे लगता है कि अधिक लचीला विकल्प रैप करने के लिए किया जाएगा Text()के साथ Align()इसलिए की तरह:

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

का उपयोग करते हुए Center()लगता है कि TextAlignपूरी तरह से पाठ विजेट पर ध्यान न दें । यह संरेखित नहीं करेगा TextAlign.leftया TextAlign.rightयदि आप प्रयास करते हैं, तो यह केंद्र में रहेगा।

Comments

ज्यादा बेहतर जवाब यही है।

— निकोला जोविच

यह चिह्नित उत्तर होना चाहिए क्योंकि सवाल यह है कि किसी पाठ को क्षैतिज और ऊर्ध्वाधर में कैसे केंद्रित किया जाए। धन्यवाद!

— अली गुलरेली

यह उत्तर लोगों का है, बस सोच रहा था कि मेरा पाठ बड़े फ़ॉन्ट आकार के साथ संरेखित क्यों नहीं कर रहा था, उस केंद्र को पाठ के साथ अजीब है और विच में एक ब्रेकपॉइंट है जो पाठ के आकार को अनदेखा करेगा। लगता है कि यह मुद्दा नहीं है ... लव यू <3

— ValdaXD

Answer 4

                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

इसने मेरे लिए सबसे अच्छा परिणाम तैयार किया।

Answer 5

नमूना कोड के नीचे केंद्र के आकार का पाठ तत्व बेहतर तरीके से काम करता है

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

कोडिंग का आनंद लें

Answer 6

पाठ को केंद्र में रखें:

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );

Answer 7

यदि आप एक intellij IDE उपयोगकर्ता हैं, तो आप शॉर्टकट कुंजी का उपयोग कर सकते हैं Alt+Enterऔर फिर चुन सकते हैं Wrap with Centerऔर फिर जोड़ सकते हैंtextAlign: TextAlign.center

Answer 8

अवलोकन: मैंने क्षैतिज अक्ष के साथ MainAxisAlignment.center का उपयोग करके अपने पृष्ठ पर टेक्स्ट को केंद्रित करने के लिए फ्लेक्स विजेट का उपयोग किया। मैं अपने पाठ के चारों ओर एक मार्जिन स्पेस बनाने के लिए कंटेनर पैडिंग का उपयोग करता हूं।

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])

Answer 9

शायद आप 2 कंटेनर के लिए समान चौड़ाई और ऊंचाई प्रदान करना चाहते हैं

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),