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