स्पंदन में एक विजेट में एक सीमा कैसे जोड़ें?

Question

मैं स्पंदन का उपयोग कर रहा हूं और मैं एक विजेट (इस मामले में, एक टेक्स्ट विजेट) में एक सीमा जोड़ना चाहूंगा।

मैंने TextStyle और Text की कोशिश की, लेकिन मैंने यह नहीं देखा कि सीमा कैसे जोड़ें।

Answer 1

आप जोड़ सकते हैं TextFieldएक के रूप में childएक करने के लिए Containerहै कि एक BoxDecorationसाथ borderसंपत्ति:

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

Answer 2

यहाँ एक विस्तारित उत्तर है। A DecoratedBoxको आपको बॉर्डर जोड़ने की आवश्यकता है, लेकिन मैं Containerमार्जिन और पैडिंग जोड़ने की सुविधा के लिए उपयोग कर रहा हूं ।

यहाँ सामान्य सेटअप है।

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

कहाँ BoxDecorationहै

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

सीमा चौड़ाई

इन की एक सीमा चौड़ाई 1, 3और 10क्रमशः।

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

किनारे का रंग

इनका बॉर्डर कलर होता है

• Colors.red
• Colors.blue
• Colors.green

कोड

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

सीमा की ओर

इनकी सीमा सीमा है

• बाएं (3.0), शीर्ष (3.0)
• नीचे (13.0)
• बाएं (नीले [100], 15.0), शीर्ष (नीले [300], 10.0), दाएं (नीले [500], 5.0), नीचे (नीले [800], 3.0)

कोड

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

सीमा त्रिज्या

इन की सीमा त्रिज्या है 5, 10और 30क्रमशः।

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

पर जा रहा

DecoratedBox/ BoxDecorationबहुत लचीले हैं। स्पंदन पढ़ें - BoxDecoration धोखा शीट कई और विचारों के लिए।

Comments

किसी को पता है कि BorderRadius के साथ BorderSide का उपयोग कैसे करें?

— Haenn Tai ताई

@HaSnenTai क्या आपको कोई समाधान मिला? मेरे डिजाइन में मुझे आकार की तरह गोली के साथ सीमा नीचे देने की आवश्यकता है। इसे कैसे प्राप्त किया जा सकता है?

— रॉबर्ट विलियम्स

@RobertWilliams, मैं एक कस्टम ड्राइंग विजेट का उपयोग करेगा।

— सूर्याग

@Suragch विजेट पाठ है जिसे एक मजबूत (गोली के आकार का) बॉर्डर की आवश्यकता है। पाठ विजेट चौड़ाई तय नहीं है। कस्टम ड्राइंग विजेट का उपयोग करने के लिए क्या मुझे फिक्स गुण प्रदान करने की आवश्यकता नहीं होगी?

— रॉबर्ट विलियम्स

@ रोबर्टविलियम्स, मुझे नहीं पता कि आप क्या करने की कोशिश कर रहे हैं। मैं वर्तमान में काम नहीं कर रहा है जो एक चित्रण और स्पष्टीकरण के साथ एक नया सवाल खोलना होगा। बेझिझक इसे यहाँ से लिंक करें।

— सुरगाछ

Answer 3

प्रलेखन में कहा गया है, स्पंदन मापदंडों पर रचना को प्राथमिकता देता है। अधिकांश समय जो आप खोज रहे हैं वह कोई संपत्ति नहीं है, बल्कि एक आवरण (और कभी-कभी कुछ मददगार / "बिल्डर")

सीमाओं के लिए आप DecoratedBoxजो चाहते हैं , वह एक decorationसंपत्ति है जो सीमाओं को परिभाषित करती है; लेकिन यह भी पृष्ठभूमि छवियों या छाया।

वैकल्पिक रूप से @ अज़ीज़ा ने कहा, आप उपयोग कर सकते हैं Container। कौन का संयोजन है DecoratedBox, SizedBoxऔर कुछ अन्य उपयोगी विगेट्स।

Answer 4

सबसे अच्छा तरीका है BoxDecoration () का उपयोग करना

फायदा

• आप विजेट की सीमा निर्धारित कर सकते हैं
• आप बॉर्डर कलर या चौड़ाई सेट कर सकते हैं
• आप बॉर्डर के गोल कोने को सेट कर सकते हैं
• आप विजेट की छाया जोड़ सकते हैं

हानि

• BoxDecorationकेवल Containerविजेट के साथ उपयोग करें ताकि आप अपने विजेट को लपेटना चाहते हैंContainer()
  
  

उदाहरण

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

Answer 5

बॉर्डर दिखाने के लिए BoxDecoration () का उपयोग करना सबसे अच्छा तरीका है।

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

आप यहां पूर्ण प्रारूप भी देख सकते हैं

Answer 6

आप अपने विजेट को शामिल करने के लिए कंटेनर का उपयोग कर सकते हैं:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

Answer 7

Boxdercoration के साथ एक कंटेनर का उपयोग करें।

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );