es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo agregar un espacio entre los íconos dentro de la caja de la ReactionButton?

Estoy intentando replicar las reacciones de emojis de Facebook y encontré y decidí usar “flutterreactionbutton” para lograr esto, pero me encuentro con un problema o debería decir que no tengo ni idea de cómo agregar algún relleno entre los íconos dentro de la caja de reacción.

Mi código para ReactionButton:

Padding(
padding: const EdgeInsets.only(right: 8.0),
child: ReactionButton(
onReactionChanged: (String? value) {},
reactions: _emojisList,
initialReaction: Reaction(
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),
),
),

Mi lista de emojis:

final List<Reaction> _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’,
),
];

Lo que quiero lograr:

Lo que tengo hasta ahora: 🙁

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Puede agregar relleno entre los iconos agregando la propiedad padding al widget Reaction. Por ejemplo:

    final List<Reaction> _emojisList = [
    Reaction(
    icon: FaIcon(
    FontAwesomeIcons.solidThumbsUp,
    color: Colors.blue,
    size: 30,
    ),
    value: 'thumbsUp',
    padding: EdgeInsets.all(8.0)),
    Reaction(
    icon: FaIcon(
    FontAwesomeIcons.solidHeart,
    color: Colors.red,
    size: 30,
    ),
    value: 'solidHeart',
    padding: EdgeInsets.all(8.0)),
    Reaction(
    icon: FaIcon(
    FontAwesomeIcons.handHoldingHeart,
    color: Colors.yellow,
    size: 30,
    ),
    value: 'handHoldingHeart',
    padding: EdgeInsets.all(8.0)),
    ];

Comments are closed.