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

【问题标题】：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) 并出现错误，我该如何解决？

【问题讨论】：

标签： android xcode flutter dart

【解决方案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)],
  )
);

【讨论】：