Skip to main content

Widgets that follow the Material Design guidelines display a ripple animation when tapped.

Flutter provides the InkWell widget to perform this effect. Create a ripple effect using the following steps:

  1. Create a widget that supports tap.
  2. Wrap it in an InkWell widget to manage tap callbacks and ripple animations.
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'),
  ),
)

Interactive example

#

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-02-12. View source or report an issue.