How to set the width and height of a button in Flutter?

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"),
),
),

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](material.io) 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.

Try it out

Expanded(
child: RaisedButton(
onPressed: _onButtonPressed,
child: Text('Button1')
)
)

If you don't want to remove all the button theme set up.

```flutter



ButtonTheme.fromButtonThemeData(
data: Theme.of(context).buttonTheme.copyWith(
minWidth: 200.0,
height: 100.0,,
)
child: RaisedButton(
onPressed: () {},
child: Text("test"),
),
);

```

Short and sweet solution for a full-width button:
```dart
Row(
children: [
Expanded(
child: ElevatedButton(...),
),
],
)
```

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

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

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: () {},
),
),
),

we use **Row** or **Column**, **Expanded**, **Container** and the element to use example **RaisedButton**

body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
),
Row(
children: <Widget>[
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'),
),
),
),
),
],
),
],
),
),

The new buttons **TextButton, ElevatedButton, OutlinedButton etc.** are to be changed in a different way.

One method I found is from [this article](

[To see links please register here]

): you need to "tighten" a constrained box around the button.

```
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kindacode.com'),
),
body: Center(
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 300, height: 200),
child: ElevatedButton(
child: Text('300 x 200'),
onPressed: () {},
),
),
));
}
```