flutterdartuser-interfaceemojifacebook-likebox

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 :(


Solution

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