Ad

How To Put Some Padding Between Icons Inside The ReactionButton Box?

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 want to achieve

What I got as of now :(: What I got as of now :(

Ad

Answer

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',
      ),
    ];
Ad
source: stackoverflow.com
Ad