Reputation: 184
I'm trying to create a simple rounded button with icon (on left) and text right to it.
I've followed https://stackoverflow.com/a/63124491/13684332, which proposes that we can make the Text
inside a FittedBox
with fit:BoxFit.cover
. I also tried fit:BoxFit.scaleDown
and fit:BoxFit.fitWidth
. All of them result in some pixels overflowing the text widget.
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)),
));
}
}
Upvotes: 1
Views: 215
Reputation: 1569
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)),
);
}
}
Upvotes: 1