How to put some padding between icons inside the ReactionButton Box?

Question

I'm trying to replicate the facebooks emoji reactions and thus found and decided to use the "flutter_reaction_button" to achieve this, but I encountered a problem or should I say I don't have a clue on have to add some padding between icons inside the reaction box.

My code for the 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),
            ),
          ),

My emojis list:

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

What I want to achieve:

What I got as of now :(:

Answer 1

you can wrap your FaIcon in Padding widget as below

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

replace _emojisList to this

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