This is a silly question but I am new in Flutter. So I hope you guys can help me with this. Is there a way for me to change the size of the button in flutter?
Rectangular shape:
OutlineButton(
child: Text(forgot_password, style: TextStyle(color: colorWhite)),
borderSide: BorderSide(
color: colorWhite,
style: BorderStyle.none,
width: 0.8,
),
onPressed: () {},
),
Circular shape:
OutlineButton(
onPressed: () {},
child: Icon(
FontAwesomeIcons.google,
color: colorWhite,
size: 20.0,
),
shape: CircleBorder(),
borderSide: BorderSide(
color: colorWhite,
style: BorderStyle.solid,
width: 1,
),
),
We can control the size of an outlined button by using the fixedSize option of the styleFrom static method.
If the button is placed in a Flex widget (including Row & Column ), you can wrap it using an Expanded Widget to fill the available space.
To change the Outlined Button color in Flutter, simply set the style property of Outlined Button from the OutlinedButton. styleFrom() static method and set the backgroundColor property to change background color and primary property to change the text color.
You can use "ButtonTheme" to change size of buttons like below:
For Rectangular shape:
ButtonTheme(
minWidth: 200.0,
height: 100.0,
child: OutlineButton(
child: Text('forgot_password', style: TextStyle(color: Colors.green)),
borderSide: BorderSide(
color: Colors.amber,
style: BorderStyle.solid,
width: 1.8,
),
onPressed: () {},
),
),
For Circular shape:
ButtonTheme(
minWidth: 200.0,
height: 100.0,
child: OutlineButton(
onPressed: () {},
child: Icon(
Icons.screen_lock_portrait,
color: Colors.redAccent,
size: 40.0,
),
shape: CircleBorder(),
borderSide: BorderSide(
color: Colors.blue,
style: BorderStyle.solid,
width: 1,
),
),
)
Also you can use Container as well SizedBox as below:
Container
Container(
width: 200.0,
height: 100.0,
child: OutlineButton(
child: Text('Login', style: TextStyle(color: Colors.green)),
borderSide: BorderSide(
color: Colors.amber,
style: BorderStyle.solid,
width: 1.8,
),
onPressed: () {},
),
),
SizedBox
SizedBox(
width: 200.0,
height: 100.0,
child: OutlineButton(
child: Text('Login', style: TextStyle(color: Colors.green)),
borderSide: BorderSide(
color: Colors.amber,
style: BorderStyle.solid,
width: 1.8,
),
onPressed: () {},
),
),
You can use the ButtonTheme or a SizedBox like below
ButtonTheme(
width: 100.0,
height: 50.0,
child: OutlineButton(
child: Text('forgot_password', style: TextStyle(color: Colors.green)),
borderSide: BorderSide(
color: Colors.amber,
style: BorderStyle.solid,
width: 1.8,
),
onPressed: () {},
)
)
Container(
width: 100.0,
height: 50.0,
margin: EdgeInsets.symmetric(vertical: 3.0),
child: SizedBox.expand(
child: OutlineButton(
child: Text('forgot_password', style: TextStyle(color: Colors.green)),
borderSide: BorderSide(
color: Colors.amber,
style: BorderStyle.solid,
width: 1.8,
),
onPressed: () {},
)
)
)
This is what I found working for me. I have used fixedSize
property of OutlinedButton.styleFrom
.
OutlinedButton.icon(
style: OutlinedButton.styleFrom(
fixedSize: Size(10, 40),
alignment: AlignmentDirectional(-1.0, 0),
side: BorderSide(
width: 1,
color: Colors.black38,
style: BorderStyle.solid)),
onPressed: () {},
label: Text("Login with Facebook"),
icon: Icon(Icons.facebook),
),
You can use minimumSize
and maximumSize
properties of your Button
's style property. This way you don't need to wrap the Button
inside another SizedBox
, Container
, ButtonTheme
, etc.
OutlinedButton(
style: OutlinedButton.styleFrom(
minimumSize: Size.fromHeight(45),
),
child: Text('Close'),
onPressed: () => Navigator.of(context).pop(),
)
Here I set the minimum height to 45, which in most cases will be the exact height.
Of course you can do this in your app's theme, and make it effective for the whole app.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With