Reputation: 155
I have custom button. I want to put the icons inside these custom buttons, i always got error to code for this situation and i couldn't get it to work.
class CustomButton extends StatelessWidget {
final Function onTap;
final String btnTxt;
final Color backgroundColor;
final Icon icon;
CustomButton({this.onTap, @required this.btnTxt, this.backgroundColor, this.icon});
@override
Widget build(BuildContext context) {
final ButtonStyle flatButtonStyle = TextButton.styleFrom(
backgroundColor: onTap == null ? ColorResources.getGreyColor(context) : backgroundColor == null ? Theme.of(context).primaryColor : backgroundColor,
minimumSize: Size(MediaQuery.of(context).size.width, 50),
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
);
return TextButton(
onPressed: onTap,
style: flatButtonStyle,
child: Text(btnTxt??"",
style: Theme.of(context).textTheme.headline3.copyWith(color: ColorResources.COLOR_WHITE, fontSize: Dimensions.FONT_SIZE_LARGEi)),
);
}
}
I tried button->style-> icon(Icons.bla bla) and got an error how can I fix it?
Upvotes: 1
Views: 1450
Reputation: 6443
Use the TextButton.icon -constructor:
return TextButton.icon(
onPressed: onTap,
style: flatButtonStyle,
icon: icon,
label: Text(btnTxt, style: ...)
)
This results in a button with the icon and the text positioned in a row.
If you want the icon to be e.g. positioned above the text, then use a column in the TextButton:
TextButton(
onPressed: ...,
style: ...
child: Column(
mainAxisSize: MainAxisSize.min,
children: [icon, Text(btnTxt)],
)
);
Upvotes: 2