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.

In the realm of Flutter app development, creating visually appealing and responsive user interfaces is a top priority. One crucial aspect of UI design is controlling the width of widgets to achieve the desired layout and user experience. If you’re working with RaisedButton widgets in Flutter and want to adjust their width, you’ve come to the right place. In this blog post, we’ll explore various approaches to set the width of a RaisedButton in Flutter, providing you with the knowledge and techniques needed to fine-tune your button layouts. Whether you’re a novice or an experienced Flutter developer, this guide will equip you with practical tips, tricks, and code snippets to create buttons with customized widths that seamlessly integrate into your app’s design. Let’s delve into the world of RaisedButton width configuration and elevate your Flutter UI skills.

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 Guide, Flutter Projects, Code 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.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.