![](/img/trans.png)
[英]How to evenly space each container of toggle button to fit screen and make selected container be rounded in flutter
[英]How to make a text fit inside a rounded button with icon
我正在尝试创建一个带有图标(左侧)和右侧文本的简单圆形按钮。
我已经关注了https://stackoverflow.com/a/63124491/13684332 ,它建议我们可以使用fit:BoxFit.cover
在FittedBox
制作Text
。 我也试过fit:BoxFit.scaleDown
和fit:BoxFit.fitWidth
。 所有这些都会导致一些像素溢出文本小部件。
class RoundedButtonWithIcon extends StatelessWidget {
RoundedButtonWithIcon(
{@required this.text,
@required this.onPress,
this.icon,
this.color,
this.image});
final String text;
final Function onPress;
Icon icon;
Image image;
Color color;
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: FlatButton(
child: Row(children: [
Container(
margin: const EdgeInsets.only(right: 3),
child: image != null ? image : (icon != null ? icon : null)),
FittedBox(
fit:BoxFit.cover,
child:
Text(
text,
style: TextStyle(
//fontSize: 13,
fontWeight: FontWeight.w400,
fontFamily: 'Roboto',
color: color != null ? color : Colors.white),
)
)]),
onPressed: () {
onPress();
},
textColor: Colors.white,
color: Colors.gray,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red, width: 1.3),
borderRadius: BorderRadius.circular(5)),
));
}
}
class RoundedButtonWithIcon extends StatelessWidget {
RoundedButtonWithIcon(
{@required this.text,
@required this.onPress,
this.icon,
this.color,
this.image});
final String text;
final Function onPress;
final Icon icon;
final Image image;
final Color color;
@override
Widget build(BuildContext context) {
return FlatButton(
child: Row(children: [
Expanded(
child: Row(
children: [
Container(
margin: const EdgeInsets.only(right: 3),
child: image != null ? image : (icon != null ? icon : null)),
Flexible(
child: FittedBox(
alignment: Alignment.centerLeft,
fit: BoxFit.scaleDown,
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'Roboto',
color: color != null ? color : Colors.white),
)),
)
],
),
),
]),
onPressed: () {
onPress();
},
textColor: Colors.white,
color: Colors.grey,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.red, width: 1.3),
borderRadius: BorderRadius.circular(5)),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.