如何在颤动中将图标放在自定义按钮内

Posted 2023-02-23

【中文标题】如何在颤动中将图标放在自定义按钮内

【英文标题】：How can i put icon inside custom button in flutter

【发布时间】：2021-09-14 23:10:51

【问题描述】：

我有自定义按钮。我想把图标放在这些自定义按钮中，我总是在这种情况下编写错误代码，我无法让它工作。

  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)),
    );
  

我尝试了 button->style-> icon(Icons.bla bla) 并出现错误，我该如何解决？

【参考方案1】：

使用TextButton.icon -构造函数：

return TextButton.icon(
  onPressed: onTap,
  style: flatButtonStyle,
  icon: icon,
  label: Text(btnTxt, style: ...)
)

这会产生一个带有图标和文本的按钮。

如果您希望图标是例如定位在文本上方，然后在 TextButton 中使用一列：

TextButton(
  onPressed: ...,
  style: ...
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [icon, Text(btnTxt)],
  )
);