फ़्लटर में एक RaisedButton की चौड़ाई कैसे सेट करें?

Question 1

मैंने देखा है कि मैं RaisedButtonस्पंदन में एक की चौड़ाई निर्धारित नहीं कर सकता । अगर मुझे अच्छी तरह से समझ में आ गया है, तो मुझे RaisedButtonएक में डाल देना चाहिए SizedBox। फिर मैं बॉक्स की चौड़ाई या ऊँचाई निर्धारित कर सकूंगा। क्या यह सही है? क्या इसे करने का एक और तरीका है?

यह SizedBoxप्रत्येक बटन के चारों ओर बनाने के लिए थोड़ा थकाऊ है इसलिए मैं सोच रहा हूं कि उन्होंने इसे इस तरह से करने के लिए क्यों चुना है। मुझे पूरा यकीन है कि उनके पास ऐसा करने का एक अच्छा कारण है लेकिन मैं इसे नहीं देखता। मचान पढ़ने के लिए और एक शुरुआत के लिए निर्माण करने के लिए बहुत मुश्किल है।

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

Question 2

जैसा कि यहाँ प्रलेखन में कहा गया है

उठाए गए बटनों का न्यूनतम आकार 88.0 36.0 होता है जो कि बटनथीम के साथ ओवरले किया जा सकता है।

आप ऐसा कर सकते हैं

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Question 3

match_parentआप के लिए उपयोग कर सकते हैं

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

किसी विशेष मूल्य के लिए आप उपयोग कर सकते हैं

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

Question 4

ऐसा इसलिए है क्योंकि स्पंदन आकार के बारे में नहीं है। यह बाधाओं के बारे में है।

आमतौर पर हमारे पास 2 उपयोग के मामले हैं:

एक विजेट का बच्चा एक बाधा को परिभाषित करता है। मूल जानकारी का आकार ही उस जानकारी पर आधारित है। ex:, Paddingजो बच्चे को बाधा बनाता है और उसे बढ़ाता है।
माता-पिता अपने बच्चे को एक बाधा लागू करते हैं। पूर्व:, SizedBoxलेकिन Columnस्ट्रेच मोड में भी , ...

RaisedButtonपहला मामला है। इसका मतलब है कि यह वह बटन है जो अपनी ऊंचाई / चौड़ाई को परिभाषित करता है। और, सामग्री नियमों के अनुसार, उठाया बटन का आकार तय हो गया है।

आप उस व्यवहार को नहीं चाहते हैं, इसलिए आप बटन की कमी को दूर करने के लिए दूसरे प्रकार के विजेट का उपयोग कर सकते हैं।

वैसे भी, अगर आपको इसकी बहुत आवश्यकता है, तो एक नया विजेट बनाने पर विचार करें जो आपके लिए काम करता है। या उपयोग करें MaterialButton, जिसके पास एक ऊंचाई की संपत्ति है।

Question 5

मैं एक MaterialButton का उपयोग करने की सलाह दूंगा, जैसे आप इसे इस तरह से कर सकते हैं:

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

Question 6

आपको एक विस्तारित विजेट का उपयोग करने की आवश्यकता है। लेकिन, यदि आपका बटन किसी कॉलम पर है, तो विस्तारित विजेट बाकी कॉलम को भरता है। तो, आपको एक पंक्ति में विस्तारित विजेट को संलग्न करना होगा।

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

Question 7

मैच पैरेंट के साथ रईस बटन बनाने का मेरा पसंदीदा तरीका यह है कि इसे कंटेनर के साथ लपेटें। नीचे नमूना कोड है।

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

Question 8

कोड का यह टुकड़ा आपकी समस्या को बेहतर ढंग से हल करने में आपकी मदद करेगा, क्योंकि हम सीधे RaisedButton को चौड़ाई निर्दिष्ट नहीं कर सकते हैं, हम इसे बच्चे को चौड़ाई निर्दिष्ट कर सकते हैं

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

Question 9

सीधे शब्दों में FractionallySizedBox, एप्लिकेशन / माता-पिता के आकार का प्रतिशत कहां widthFactorऔर कैसे heightFactorपरिभाषित करें।

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

Question 10

अपने समाधान के लिए बुद्धिमानी से चौड़ाई का उपयोग करने के लिए मीडिया क्वेरी का उपयोग करें जो छोटे और बड़े स्क्रीन के लिए समान चलेगी

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

आप SizeBoxभी इसी तरह के समाधान लागू कर सकते हैं।

Question 11

यदि आप चाहते हैं कि विश्व स्तर पर आपके सभी एस की ऊंचाई और मिनट में बदलाव हो RaisedButton, तो आप ThemeDataअपने अंदर ओवरराइड कर सकते हैं MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

Question 12

कंटेनर के अंदर RaisedButton लपेटें और कंटेनर विजेट को चौड़ाई दें।

जैसे

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

Question 13

आप अनुप्रयोग के लिए उपयोग किए जा रहे बटन की तरह वैश्विक विधि बना सकते हैं। यह कंटेनर के अंदर पाठ की लंबाई के अनुसार आकार देगा। FittedBox विजेट का उपयोग विजेट को उसके अंदर के बच्चे के अनुसार फिट करने के लिए किया जाता है।

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

यदि आप विशिष्ट चौड़ाई और ऊंचाई का बटन चाहते हैं, तो आप न्यूनतम अधिकतम चौड़ाई और बटन की ऊंचाई देने के लिए RawMaterialButton की बाधा संपत्ति का उपयोग कर सकते हैं

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

Question 14

जैसा कि आप टिप्पणियों में कहते हैं, आप कर सकते हैं या आप प्रयास को बचा सकते हैं और RawMaterialButton के साथ काम कर सकते हैं। जिसके पास सब कुछ है और आप सीमा को बदल सकते हैं और अन्य विशेषताओं को बदल सकते हैं। पूर्व आकार (त्रिज्या को अधिक गोलाकार आकार में बढ़ाएं)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

और आप GestureDetector जो एक विजेट है का उपयोग करके एक बटन के रूप में आप जो भी आकार चाहते हैं, का उपयोग कर सकते हैं और बाल विशेषता के तहत एक और विजेट स्वीकार करते हैं। दूसरे उदाहरण में यहाँ की तरह

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

Question 15

यदि बटन को Flexविजेट (सहित Rowऔर Column) में रखा गया है , तो आप उपलब्ध स्थान को भरने के लिए एक विस्तारित विजेट का उपयोग करके इसे लपेट सकते हैं।

Question 16

मेरे मामले में मैंने आकार बदलने में सक्षम होने के लिए मार्जिन का उपयोग किया:

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

Question 17

कोशिश करके देखो

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

Question 18

यदि आप सेट किए गए सभी बटन थीम को हटाना नहीं चाहते हैं।




ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Question 19

यदि आपके पास एक कॉलम () के अंदर एक बटन है और चाहते हैं कि बटन अधिकतम चौड़ाई ले, तो सेट करें:

crossAxisAlignment: CrossAxisAlignment.stretch

अपने कॉलम विजेट में। अब इस कॉलम () के तहत हर चीज में अधिकतम उपलब्ध चौड़ाई होगी

Question 20

इसने मेरे लिए काम किया। कंटेनर ऊंचाई प्रदान करता है और FracticallySizedBox RaisedButton के लिए चौड़ाई प्रदान करता है।

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),

Question 21

पूर्ण-चौड़ाई वाले बटन के लिए छोटा और मीठा घोल:

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)