Responsive Material Button widgets flutter - flutter

Question

I have designed an interaface of login. Everything is working fine but these two buttons are not looking good.
Myscreen in landscape
I want to adjust them according to the screen size and orientation
want to achieve
Here is my code to define them
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF0148A4),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Icon(
FontAwesomeIcons.facebookF,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Facebook',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 15.0,
),
),
],
),
),
),
),
SizedBox(
width: 15.0,
),
Expanded(
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFFF14436),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
splashColor: Colors.redAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Icon(
FontAwesomeIcons.google,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Google',
style: TextStyle(fontSize: 15.0),
),
],
),
),
),
),
],
),
Also the button below needs to be responsive as well. I am using expanded widget but its working as shown. Any other way to do that !

Answer 1

You may try FractionallySizedBox to set the width of the whole container with respect to the available screen width. Also FittedBox can help to restrict the widget to be drawn with in the bounds.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FractionallySizedBox(
widthFactor: .8,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: FittedBox(
fit: BoxFit.fitWidth,
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF0148A4),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Icon(
Icons.home,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Facebook',
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15.0,
),
),
],
),
),
),
),
),
SizedBox(
width: 15.0,
),
Expanded(
child: FittedBox(
fit: BoxFit.fitWidth,
alignment: Alignment.center,
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFFF14436),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
splashColor: Colors.redAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Icon(
Icons.home,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Google',
style: TextStyle(fontSize: 15.0),
),
],
),
),
),
),
),
],
),
);
}
}