How to set the width of a RaisedButton in Flutter?

· 6 min read
How to Set the Width of a RaisedButton In Flutter
How to Set the Width of a RaisedButton In Flutter

RaisedButton Widget is a normal button but implemented with material ink spread effect upon clicking. So in this article, we will go through how to set the Width of a RaisedButton in Flutter.

How to set the width of a RaisedButton in Flutter?

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

So you can do it like the following:

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

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 enforces a constraint on its child. ex: SizedBox, but also Column Widget in stretch mode.

RaisedButton is the first case. This means it’s the button that 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.

We would recommend using a MaterialButton.

Now, 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: () => {}, 
 splashColor: Colors.redAccent,
)

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(...)
)

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 its 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,
    );

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: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

So 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,
      ),
   ));
 }

My preferred way to make RaiseButton with match parent is that wrap it with Container. below is the sample code.

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

So you can Wrap RaisedButton inside Container and give width to Container Widget.

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

You can create a global method for buttons being used all over the app. Hence it will resize according to the text length inside the container.

So, FittedBox Widget is used to make the 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();
   },
  ),
 );
}

So now, If you want a button of specific width and height you can use the constraint property of RawMaterialButton for giving min max-width and height of the button

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

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: () => null
          ),
        )

So you can apply a similar solution to SizeBox also.

  • Simply use FractionallySizedBox, where widthFactor & heightFactor define the percentage of app/parent size.
    FractionallySizedBox(
    widthFactor: 0.8,   //means 80% of app width
    child: RaisedButton(
      onPressed: () {},
      child: Text(
        "Your Text",
        style: TextStyle(color: Colors.white),
      ),
      color: Colors.red,
    )),
  • Try it out
    Expanded(   
      child: RaisedButton(
        onPressed: _onButtonPressed,
        child: Text('Button1')
      )  
    )
  • 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("test"),
      ),
    );

Conclusion:

So that’s it!! Thanks for being with us on a flutter journey !!!

Drop your feedback / Questions in the comments!!

So in this article, we have been through how to set the width of a RaisedButton in Flutter.

Keep Learning !!! Keep Fluttering !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

1 comment

Leave a Reply