How to set the width of a RaisedButton in Flutter

Question

I have seen that I can t set the width of a RaisedButton in Flutter  If I have well understood  I should put the RaisedButton into a SizedBox  I will then be able to set the width or height of the box  Is it correct  Is there another way to do it   This is a bit tedious to create a SizedBox around every buttons so I m wondering why they have chosen to do it this way  I m pretty sure that they have a good reason to do so but I don t see it  The scaffolding is pretty difficult to read and to build for a beginner   new SizedBox    width  200 0    height  100 0    child  new RaisedButton      child  new Text  Blabla blablablablablablabla bla bla bla        onPressed   onButtonPressed

User · Accepted Answer

As said in documentation here

Raised buttons have a minimum size of 88.0 by 36.0 which can be overidden with ButtonTheme.

You can do it like that

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

User · Answer

If you have a button inside a Column   and want the button to take maximum width  set   crossAxisAlignment  CrossAxisAlignment stretch  in your Column widget  Now everything under this Column   will have maximum available width

User · Answer

If the button is placed in a Flex widget  including Row  amp  Column   you can wrap it using an Expanded Widget to fill the available space

User · Answer

This piece of code will help you better solve your problem  as we cannot specify width directly to the RaisedButton  we can specify the width to it s child  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

User · Answer

i would recommend using a MaterialButton  than you can do it like this   new MaterialButton    height  40 0    minWidth  70 0    color  Theme of context  primaryColor    textColor  Colors white    child  new Text  push      onPressed       gt        splashColor  Colors redAccent

User · Answer

Use Media Query to use width wisely for your solution which will run the same for small and large screen     Container              width  MediaQuery of context  size width   0 5     Will take 50  of screen space             child  RaisedButton                child  Text  Go to screen two                  onPressed       gt  null                              You can apply similar solution to SizeBox also

User · Answer

You can create global method like for button being used all over the app  It will resize according to the text length inside container  FittedBox widget is used to make widget fit according to the child inside it   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                       If you want button of specific width and height you can use constraint property of RawMaterialButton for giving min max width and height of button  constraints  BoxConstraints minHeight  45 0 maxHeight 60 0 minWidth 20 0 maxWidth 150 0

User · Answer

you can do as they say in the comments or you can save the effort and work with RawMaterialButton   which have everything and you can change the border to be circular  and alot of other attributes  ex shape increase the radius to have more circular shape   shape  new RoundedRectangleBorder borderRadius  BorderRadius circular 25     ex add 1000 instead of 25   and you can use whatever shape you want as a button by using GestureDetector which is a widget and accepts another widget under child attribute   like in the other example here  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

User · Answer

Try it out Expanded       child  RaisedButton      onPressed   onButtonPressed      child  Text  Button1

User · Answer

If you want globally change the height and the minWidth of all your RaisedButtons  then you can override ThemeData inside your MaterialApp     override   Widget build BuildContext context        return MaterialApp                    theme  ThemeData                    buttonTheme  ButtonThemeData            height  46            minWidth  100

User · Answer

Simply use FractionallySizedBox  where widthFactor  amp  heightFactor  define the percentage of app parent size  FractionallySizedBox  widthFactor  0 8      means 80  of app width child  RaisedButton    onPressed           child  Text       quot Your Text quot       style  TextStyle color  Colors white          color  Colors red

User · Answer

My preferred way to make Raise button with match parent is that wrap it with Container   below is sample code   Container            width  double infinity            child  RaisedButton                   onPressed                          color  Colors deepPurpleAccent 100                    child  Text                           Continue                           style  TextStyle color  Colors white

User · Answer

In my case I used margin to be able to change the size   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

User · Answer

This worked for me  The Container provides the height and FractionallySizedBox provides the width for the RaisedButton  Container    height  50 0    Provides height for the RaisedButton   child  FractionallySizedBox      widthFactor  0 7      Provides 70  width for the RaisedButton     child  RaisedButton        onPressed

User · Answer

You need to use an Expanded Widget  But  if your button is on a column  the Expanded Widget fills the rest of the column  So  you need to enclose the Expanded Widget within a row   Row children   lt Widget gt   Expanded    flex  1    child  RaisedButton      child  Text  Your Text          onPressed   submitForm

User · Answer

Short and sweet solution for a full-width button  Row    children        Expanded        child  ElevatedButton

User · Answer

That s because flutter is not about size  It s about constraints    Usually we have 2 use cases     The child of a widget defines a constraint  The parent size itself is based on that information  ex  Padding  which takes the child constraint and increases it  The parent enforce a constraint to its child  ex  SizedBox  but also Column in strech mode        RaisedButton is the first case  Which means it s the button which defines its own height width  And  according to material rules  the raised button size is fixed   You don t want that behavior  therefore you can use a widget of the second type to override the button constraints     Anyway  if you need this a lot  consider either creating a new widget which does the job for you  Or use MaterialButton  which possesses a height property

User · Answer

match parent  Full width   SizedBox    width  double infinity      lt -- match parent   child  RaisedButton          Specific width  SizedBox    width  100      lt -- Your width   child  RaisedButton

User · Answer

If you don t want to remove all the button theme set up     ButtonTheme fromButtonThemeData    data  Theme of context  buttonTheme copyWith                  minWidth  200 0                  height  100 0                     child  RaisedButton      onPressed             child  Text  quot test quot

User · Answer

we use Row or Column  Expanded  Container and the element to use example RaisedButton  body  Center              child  Column                mainAxisAlignment  MainAxisAlignment start                children   lt Widget gt                   Padding                    padding  const EdgeInsets symmetric vertical  10 0                                      Row                    children   lt Widget gt                       Expanded                        flex  2     we define the width of the button                       child  Container                             height  50  we define the height of the button                         child  Padding                            padding  const EdgeInsets symmetric horizontal  10 0                             child  RaisedButton                              materialTapTargetSize  MaterialTapTargetSize shrinkWrap                              textColor  Colors white                              color  Colors blue                              onPressed                                        Method to execute                                                            child  Text  Copy                                                                                                                                Expanded                        flex  2     we define the width of the button                       child  Container                             height  50  we define the height of the button                         child  Padding                            padding  const EdgeInsets symmetric horizontal  10 0                             child  RaisedButton                              materialTapTargetSize  MaterialTapTargetSize shrinkWrap                              textColor  Colors white                              color  Colors green                              onPressed                                        Method to execute                                                            child  Text  Paste

User · Answer

Wrap RaisedButton inside Container and give width to Container Widget   e g   Container   width   200   child   RaisedButton           child  YourWidget            onPressed

[flutter] How to set the width of a RaisedButton in Flutter?

Examples related to flutter

Examples related to flutter-layout