Button Width Match Parent

Question

I want to know that how can I set a width to match parent layout width new Container    width  200 0    padding  const EdgeInsets only top  16 0     child  new RaisedButton      child  new Text           quot Submit quot           style  new TextStyle            color  Colors white                       colorBrightness  Brightness dark      onPressed              loginAttempt context              color  Colors blue           I know about little bit on Expanded widget but Expanded expands view to both direction  i dont know how to do it

User · Answer

Container    width  double infinity    child  RaisedButton

User · Answer

You can set match parent of the widget by  1  set width to 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  Use 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

User · Answer

The simplest way is to use a FlatButton wrapped inside a Container  The button by default takes the size of its parent and so assign a desired width to the 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                                                                                           Output

User · Answer

Place your RaisedButton      in a SizedBox SizedBox    width  double infinity    child  RaisedButton

User · Answer

Using a ListTile also works as well  since a list fills the entire width   ListTile    title  new RaisedButton

User · Answer

The correct solution would be to use the SizedBox expand widget  which enforces its child to match its parent s size   SizedBox expand    child  RaisedButton           There are many alternatives  which allows for more or less customization   SizedBox    width  double infinity       height  double infinity    child  RaisedButton           or using a ConstrainedBox  ConstrainedBox      constraints  const BoxConstraints minWidth  double infinity       child  RaisedButton

User · Answer

For match parent you can use   SizedBox    width  double infinity     match parent   child  RaisedButton          For any particular value you can use  SizedBox    width  100     specific value   child  RaisedButton

User · Answer

OutlineButton                onPressed                       logInButtonPressed context                                  child  Container                  width  MediaQuery of context  size width   2                  child  Text                       Log in                       textAlign  TextAlign center                                                      Something like this works for me

User · Answer

you can do that wit MaterialButton  MaterialButton       padding  EdgeInsets all 12 0        minWidth  double infinity       onPressed             child  Text  Btn

User · Answer

This worked for me   The simplest way to give match-parent width or height in the given code above       width  double infinity  height  double infinity

User · Answer

After some research  I found out some solution  and thanks to  G  nter Z  chbauer    I used column instead of Container and   set the property to column CrossAxisAlignment stretch to Fill match parent of Button      new Column                crossAxisAlignment  CrossAxisAlignment stretch                children   lt Widget gt                   new RaisedButton                    child  new Text                         Submit                         style  new TextStyle                          color  Colors white                                                                 colorBrightness  Brightness dark                    onPressed                            loginAttempt context                                          color  Colors blue

User · Answer

new SizedBox    width  100 0       child  new RaisedButton

User · Answer

The size attribute can be provided using ButtonTheme with minWidth  double infinity   ButtonTheme    minWidth  double infinity    child  MaterialButton      onPressed             child  Text  Raised Button              or after https   github com flutter flutter pull 19416 landed  MaterialButton    onPressed           child  SizedBox expand      width  double infinity       child  Text  Raised Button

User · Answer

This is working for me in a self contained widget     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

User · Answer

Mohit Suthar   Found one of the best solution for match parent to width as well as height as below  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                   Here you can check that the Expanded Controller acquire whole remain width and height

User · Answer

This one worked for me  width  MediaQuery of context  size width-100

User · Answer

RaisedButton    child  Row      mainAxisAlignment  MainAxisAlignment center      children   Text  Submit            It works for me

User · Answer

The Following code work for me          ButtonTheme              minWidth  double infinity              child  RaisedButton child  Text  Click     style  TextStyle color  Colors white     color  Colors pink  onPressed

User · Answer

This is working for me       SizedBox               width  double maxFinite               child  RaisedButton                   materialTapTargetSize  MaterialTapTargetSize shrinkWrap                   child  new Text  Button 2                     color  Colors lightBlueAccent                   onPressed       gt  debugPrint  Button 2

User · Answer

The most basic approach is using Container by define its width to infinite  See below example of code  Container      width  double infinity      child FlatButton          onPressed                     your action here                    child  Text  Button

[flutter] Button Width Match Parent

Examples related to flutter

Examples related to flutter-layout