我设计了一个登录界面。一切工作正常,但是这两个按钮看起来并不好。 Myscreen in landscape 我想根据屏幕尺寸和方向进行调整
这是我定义它们的代码
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),
),
],
),
),
),
),
],
),
下面的按钮也需要响应。我正在使用扩展的小部件,但其工作如图所示。还有其他方法可以做到!
答案 0 :(得分:0)
您可以尝试FractionallySizedBox相对于可用屏幕宽度设置整个容器的宽度。此外,FittedBox可以帮助限制要在边界内绘制的小部件。
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),
),
],
),
),
),
),
),
],
),
);
}
}