How to change the size of button in flutter? - flutter

Question

i have three buttons in my login page each of them are a different type of login options when i type in bigger texts in one button that itself is changing how can i keep everything constant.can someone look into it please.
Here's my code:
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(size: 150),
SizedBox(height: 50),
_signInButton(),
_signInFbButton()
],
),
),
),
);
}
Widget _signInButton() {
return Container(
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/google_logo.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
}
Widget _signInFbButton() {
return Container(
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/facebook-logo.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
here's the screen shot of how many buttons are arranged i want to have all the buttons constant and texts inside it formatted properly:

Answer 1

You don't need the column I think. So, I removed that. Here is the way you can create custom button with size. Feel free to change minWidth to get the best result.
new: Please consider using Flexible and Expanded inside the row. If the button text goes in multi-line please reduce the font size to fix it.
Widget _signInButton() {
return ButtonTheme(
minWidth: 400.0,
padding: EdgeInsets.all(10),
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {},
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Image.network(
'https://picsum.photos/250?image=9',
height: 35,
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Text('Sign in with Facebook',
style: TextStyle(
fontSize: 20, color: Colors.grey))),
)
])
),
);
}