बटन चौड़ाई मिलान जनक

Question

मैं जानना चाहता हूं कि मैं पैरेंट लेआउट की चौड़ाई से मेल खाने के लिए चौड़ाई कैसे सेट कर सकता हूं

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

मैं Expandedविजेट के बारे में बहुत कम जानता हूं, लेकिन Expandedदोनों दिशाओं के बारे में विस्तार करता हूं, मुझे नहीं पता कि यह कैसे करना है।

Comments

शायद इसके बजाय एक कॉलम?

— गुंटर ज़ोचाउर

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

— मोहित सुथार

आप बस एक फ्लैटबटन का उपयोग कर सकते हैं और इसे एक कंटेनर के अंदर लपेट सकते हैं और नीचे दिए गए मेरे जवाब के लिए मीडियाक्वेरी लुक का उपयोग करके स्क्रीन की चौड़ाई में कंटेनर की चौड़ाई जोड़ सकते हैं

— महेशमंज

Answer 1

SizedBox.expandविजेट का उपयोग करने के लिए सही समाधान होगा , जो childअपने माता-पिता के आकार से मेल खाने के लिए इसे लागू करता है ।

SizedBox.expand(
  child: RaisedButton(...),
)

कई विकल्प हैं, जो अधिक या कम अनुकूलन की अनुमति देता है:

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

या एक का उपयोग कर ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)

Comments

SizedBox.expand बटन को पूरी चौड़ाई और ऊंचाई पर ले जाएगा, जिसके बारे में सवाल नहीं है। सवाल पूरी चौड़ाई को कवर करने वाले बटन के बारे में है, केवल ऊंचाई पर नहीं।

— विनोथ कुमार

@ RémiRousselet विनोथ की टिप्पणी मान्य है। चूँकि यह अब स्वीकृत उत्तर है, क्या आप केवल चौड़ाई का विस्तार करने के लिए SizedBox के लिए सही कंस्ट्रक्टर जोड़ सकते हैं?

— user823447

मैं यह त्रुटि प्राप्त कर रहा हूंFailed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.

— kapsid

समाधान के लिए थैंक्स

— अजय कुमार

मुझे दोनों तरह के उत्तर पसंद हैं, यह अधिक पूर्ण है।

— रेडियन कोर

Answer 2

आकार विशेषता का उपयोग प्रदान किया जा सकता ButtonThemeके साथminWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

या उसके बाद https://github.com/flutter/flutter/pull/19416 उतरा

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),

Answer 3

Container(
  width: double.infinity,
  child: RaisedButton(...),
),

Answer 4

सबसे सरल तरीका एक FlatButtonअंदर लिपटे का उपयोग करना है Container, डिफ़ॉल्ट रूप से बटन अपने माता-पिता के आकार को लेता है और इसलिए एक वांछित चौड़ाई असाइन करता है Container।

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

आउटपुट:

Answer 5

कुछ शोध के बाद, मुझे कुछ उपाय पता चला, और @ Günter Zöchbauer का धन्यवाद,

मैंने कंटेनर के बजाय कॉलम का उपयोग किया और

CrossAxisAlignment.stretch को बटन के अभिभावक से मिलान करने के लिए प्रॉपर्टी सेट करें

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),

Comments

Column/ Rowएकल-बाल लेआउट के लिए उपयोग नहीं किया जाना चाहिए। इसके बजाय एकल-बच्चे के विकल्प का उपयोग करें। इस तरह के रूप में Align, SizedBox, और इसी तरह।

— रेमी रूसेलेट

Answer 6

आप विजेट के जनक से सेट कर सकते हैं

1) सेट चौड़ाई को double.infinity :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) MediaQuery का उपयोग करें:

new Container(
          width: MedialQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

Answer 7

@ मोहित सुथार,

मैच माता-पिता के लिए चौड़ाई के साथ- साथ नीचे की ऊंचाई के लिए सबसे अच्छा समाधान मिला

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

यहाँ आप देख सकते हैं कि Expandedनियंत्रक अधिग्रहण पूरे रहने चौड़ाई और ऊंचाई ।

Comments

अब तक इसका सबसे अच्छा समाधान

— एम डेविड

Answer 8

इसने मेरे लिए काम किया ।

ऊपर दिए गए कोड में मैच-पैरेंट चौड़ाई या ऊँचाई देने का सबसे सरल तरीका।

...
width: double.infinity,
height: double.infinity,
...

Answer 9

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

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

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

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

Answer 10

मेरे लिए निम्नलिखित कोड काम करते हैं

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))

Answer 11

यह मेरे लिए एक आत्म निहित विजेट में काम कर रहा है।

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.

Answer 12

यह मेरे लिए काम कर रहा है।

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ), 

Answer 13

का उपयोग करते हुए एक ListTileभी रूप में अच्छी तरह से काम करता है, के बाद से एक सूची पूरी चौड़ाई भर देता है:

ListTile(
  title: new RaisedButton(...),
),

Answer 14

आप कर सकते हैं कि Wit MaterialButton

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)

Answer 15

 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)

Answer 16

यह एक मेरे लिए काम किया

width: MediaQuery.of(context).size.width-100,

Answer 17

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) इससे मेरा काम बनता है।

Answer 18

सबसे बुनियादी दृष्टिकोण कंटेनर का उपयोग करके इसकी चौड़ाई को अनंत तक परिभाषित किया गया है। कोड के उदाहरण के नीचे देखें

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)

Answer 19

         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(
                  “Log in”,
                  textAlign: TextAlign.center,
                ),
              ),
            )

मेरे लिए कुछ इस तरह से काम करता है।

Answer 20

अपने RaisedButton(...)में रखेंSizedBox

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