如何在flutter_reaction_button的ReactionButton反应框图标之间添加内边距

方案1：为单个图标单独设置间距 #

你可以直接给每个Reaction的icon外层包裹Padding组件，按需设置每个图标左右的内边距，修改_emojisList代码即可：

final List<Reaction<String>> _emojisList = [
      Reaction(
          icon: Padding(
            // 左右间距可根据需求调整数值
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: FaIcon(
              FontAwesomeIcons.solidThumbsUp,
              color: Colors.blue,
              size: 30,
            ),
          ),
          value: 'thumbsUp'),
      Reaction(
          icon: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: FaIcon(
              FontAwesomeIcons.solidHeart,
              color: Colors.red,
              size: 30,
            ),
          ),
          value: 'solidHeart'),
      Reaction(
        icon: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: FaIcon(
            FontAwesomeIcons.handHoldingHeart,
            color: Colors.yellow,
            size: 30,
          ),
        ),
        value: 'handHoldingHeart',
      ),
    ];

方案2：通过组件参数全局统一设置间距 #

ReactionButton自带itemPadding配置项，可直接统一设置所有反应项的内边距，无需逐个修改图标，只需在ReactionButton配置中新增对应参数即可：

Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: ReactionButton<String>(
              onReactionChanged: (String? value) {},
              reactions: _emojisList,
              // 新增该行配置，数值可按需调整
              itemPadding: const EdgeInsets.symmetric(horizontal: 8),
              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),
            ),
          ),

两种方案按需选择即可：需要为不同图标设置差异化间距选方案1，需要统一所有图标间距选方案2效率更高。

内容的提问来源于stack exchange，提问作者NiiTii