PulsatingButton class

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

PulsatingButton crea un halo que se expande y contrae suavemente alrededor de un botón central, combinando cambios de escala y opacidad para atraer la atención del usuario.

Características principales:

Pulsación continua (loop infinito con reversa)
Halo con opacidad dinámica que se desvanece al expandirse
Radio animado sincronizado con la pulsación
Personalizable: duración, tamaño, color, curva, borde y radio
Desktop/Web friendly: cursor tipo click

Casos de uso ideales:

CTA principales (“Comenzar”, “Comprar”, “Grabar”)
Botones de bienvenida o pantallas vacías
Llamar la atención en onboarding/notificaciones

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,
  height: 70,
  pulsationDuration: Duration(milliseconds: 1000),
  pulsationSize: 20,
  curve: Curves.easeInOutCubic,
  borderRadius: BorderRadius.circular(35),
  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 (outline):

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

Buenas prácticas:

1–2 instancias por pantalla para no saturar la UI
Mantén contraste entre color y el child
Para pill look: borderRadius = BorderRadius.circular(height / 2)

Consideraciones de rendimiento:

Animación permanente: úsalo con moderación (especialmente en listas)
Envuelto en RepaintBoundary para aislar repaints del resto del árbol

Véase también:

AnimatedStateButton para múltiples estados
FocusButton para borde gradiente animado 360°
RippleRevealButton / RectRevealButton para efectos de revelado

Inheritance

Constructors

PulsatingButton({Key? key, VoidCallback? onClick, @Deprecated('Usa onClick en su lugar') VoidCallback? onPressed, 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 del botón central (no se anima).
final
borderRadius → BorderRadius?: Radio de esquinas del botón y base para el halo.
final
child → Widget?: Contenido del botón (texto, icono, fila, etc.).
final
color → Color: Color del botón central y base del halo.
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 al presionar el botón.
final
onPressed → VoidCallback?: Alias deprecado para mantener compatibilidad con código legacy.
final
pulsationDuration → Duration: Duración de un ciclo completo (expandir + contraer).
final
pulsationSize → double: Número de píxeles que el halo se expande 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