Saltar al contenido principal

Añadir efectos de onda táctiles de Material

Cómo implementar animaciones de ondas (ripple).

Los Widgets que siguen las pautas de Material Design muestran una animación de onda (ripple) cuando se tocan.

Flutter proporciona el Widget InkWell para realizar este efecto. Crea un efecto de onda utilizando los siguientes pasos:

  1. Crear un Widget que admita toques.
  2. Envuélvelo en un Widget InkWell para gestionar los callbacks de toque y las animaciones de ondas.
dart
// The InkWell wraps the custom flat button widget.
InkWell(
  // When the user taps the button, show a snackbar.
  onTap: () {
    ScaffoldMessenger.of(
      context,
    ).showSnackBar(const SnackBar(content: Text('Tap')));
  },
  child: const Padding(
    padding: EdgeInsets.all(12),
    child: Text('Flat Button'),
  ),
)

Ejemplo interactivo

#