PulsatingButton class

Un botón animado con efecto de pulsación continua tipo latido.

PulsatingButton crea un botón que pulsa continuamente con una animación de escala y opacidad, similar a un latido del corazón. El efecto crea una capa exterior que se expande y contrae alrededor del botón principal, atrayendo la atención del usuario.

Características principales:

Animación continua: Pulsación infinita sin necesidad de interacción
Efecto de halo: Capa exterior con opacidad que se desvanece al expandirse
Escala dinámica: Expansión y contracción suave del tamaño
Radio animado: Las esquinas se expanden sincronizadas con la pulsación
Altamente personalizable: Control total sobre duración, tamaño, color y forma

Ejemplo básico:

PulsatingButton(
  onClick: () => print('¡Botón presionado!'),
  child: Text(
    'Comenzar',
    style: TextStyle(color: Colors.white, fontSize: 16),
  ),
)

Ejemplo personalizado:

PulsatingButton(
  onClick: _handleAction,
  color: Colors.red,
  width: 200.0,
  height: 70.0,
  pulsationDuration: Duration(milliseconds: 1000),
  pulsationSize: 20.0,
  curve: Curves.easeInOutCubic,
  borderRadius: BorderRadius.circular(35.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.play_arrow, color: Colors.white),
      SizedBox(width: 8),
      Text('Reproducir', style: TextStyle(color: Colors.white)),
    ],
  ),
)

Ejemplo con borde:

PulsatingButton(
  onClick: _onPressed,
  color: Colors.transparent,
  border: Border.all(color: Colors.purple, width: 2),
  width: 150.0,
  height: 50.0,
  pulsationSize: 15.0,
  child: Text(
    'Suscribirse',
    style: TextStyle(color: Colors.purple),
  ),
)

Casos de uso ideales:

Llamadas a la acción (CTA) principales
Botones de "Comenzar" en pantallas de bienvenida
Acciones urgentes o importantes que requieren atención
Botones de notificaciones o alertas
Elementos destacados en interfaces de juegos

Consideraciones de rendimiento:

La animación se ejecuta constantemente, considere el impacto en batería
Use con moderación (1-2 por pantalla máximo)
No recomendado para listas largas o elementos repetidos
El RepaintBoundary puede ayudar si tiene múltiples instancias

Parámetros clave:

pulsationSize: Controla cuánto se expande el halo (default: 12.0)
pulsationDuration: Velocidad de la pulsación (default: 800ms)
curve: Curva de animación para el efecto (default: Curves.easeInOut)

Véase también:

AnimatedStateButton para botones con múltiples estados
FocusButton para botones con borde gradiente animado
RippleRevealButton para efectos de revelación al presionar

Inheritance

Constructors

PulsatingButton({Key? key, VoidCallback? onClick, Color color = Colors.blue, Duration pulsationDuration = const Duration(milliseconds: 800), double width = 120.0, double height = 60.0, BoxBorder? border, BorderRadius? borderRadius = const BorderRadius.all(Radius.circular(12.0)), Widget? child, Curve curve = Curves.easeInOut, double pulsationSize = 12.0}): Crea un botón con efecto de pulsación continua.
const

Properties

border → BoxBorder?: Borde opcional para el botón central.
final
borderRadius → BorderRadius?: Radio de las esquinas del botón.
final
child → Widget?: Widget hijo que se muestra dentro del botón.
final
color → Color: Color principal del botón y del efecto de halo pulsante.
final
curve → Curve: Curva de animación aplicada a la pulsación.
final
hashCode → int: The hash code for this object.
no setterinherited
height → double: Alto del botón central (sin contar la expansión del halo).
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
onClick → VoidCallback?: Callback que se ejecuta cuando el botón es presionado.
final
pulsationDuration → Duration: Duración de un ciclo completo de pulsación (expansión + contracción).
final
pulsationSize → double: Cantidad de píxeles que se expande el halo en cada dirección.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
width → double: Ancho del botón central (sin contar la expansión del halo).
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<PulsatingButton>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited