Add Material touch ripples
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:
- Create a widget that supports tap.
- 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 2024-06-26. View source or report an issue.