如何在 ReactionButton Box 内的图标之间放置一些填充？

Question

我正在尝试复制 facebook 表情符号反应，因此发现并决定使用“flutter_reaction_button”来实现此目的，但我遇到了问题或我应该说我不知道​​必须在反应框内的图标 之间添加一些 填充。

我的 ReactionButton 代码：

Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: ReactionButton<String>(
              onReactionChanged: (String? value) {},
              reactions: _emojisList,
              initialReaction: Reaction<String>(
                value: null,
                icon: const Icon(
                  Icons.language,
                ),
              ),
              boxElevation: 10,
              boxPosition: Position.BOTTOM,
              boxPadding:
                  const EdgeInsets.symmetric(horizontal: 15.0, vertical: 13.0),
              itemScale: 0.5,
              boxColor: Colors.black12.withOpacity(0.1),
              boxRadius: 10,
              boxDuration: const Duration(milliseconds: 500),
              itemScaleDuration: const Duration(milliseconds: 200),
            ),
          ),

我的表情符号列表：

final List<Reaction<String>> _emojisList = [
      Reaction(
          icon: FaIcon(
            FontAwesomeIcons.solidThumbsUp,
            color: Colors.blue,
            size: 30,
          ),
          value: 'thumbsUp'),
      Reaction(
          icon: FaIcon(
            FontAwesomeIcons.solidHeart,
            color: Colors.red,
            size: 30,
          ),
          value: 'solidHeart'),
      Reaction(
        icon: FaIcon(
          FontAwesomeIcons.handHoldingHeart,
          color: Colors.yellow,
          size: 30,
        ),
        value: 'handHoldingHeart',
      ),
    ];

我想达到的目标：

我现在得到了什么:(:

Answer 1

您可以将 FaIcon 包装在 Padding 小部件中，如下所示

final List<Reaction<String>> _emojisList = [
      Reaction(
          icon: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: FaIcon(
              FontAwesomeIcons.solidThumbsUp,
              color: Colors.blue,
              size: 30,
            ),
          ),
          value: 'thumbsUp'),
      Reaction(
          icon: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: FaIcon(
              FontAwesomeIcons.solidHeart,
              color: Colors.red,
              size: 30,
            ),
          ),
          value: 'solidHeart'),
      Reaction(
        icon: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0),
          child: FaIcon(
            FontAwesomeIcons.handHoldingHeart,
            color: Colors.yellow,
            size: 30,
          ),
        ),
        value: 'handHoldingHeart',
      ),
    ];

Answer 2

将 _emojisList 替换为此

final List<Reaction<String>> _emojisList = [
  Reaction(
      icon: const Padding(
        padding: EdgeInsets.symmetric(
          horizontal: 16.0,
        ),
        child: FaIcon(
          FontAwesomeIcons.solidThumbsUp,
          color: Colors.blue,
          size: 30,
        ),
      ),
      value: 'thumbsUp'),
  Reaction(
      icon: const Padding(
        padding: EdgeInsets.symmetric(
          horizontal: 16.0,
        ),
        child: FaIcon(
          FontAwesomeIcons.solidHeart,
          color: Colors.red,
          size: 30,
        ),
      ),
      value: 'solidHeart'),
  Reaction(
    icon: const Padding(
      padding: EdgeInsets.symmetric(
        horizontal: 16.0,
      ),
      child: FaIcon(
        FontAwesomeIcons.handHoldingHeart,
        color: Colors.yellow,
        size: 30,
      ),
    ),
    value: 'handHoldingHeart',
  ),
];