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:

1. Create a widget that supports tap.
2. Wrap it in an InkWell widget to manage tap callbacks and ripple animations.

// 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'),  ), ) 

import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { const title = 'InkWell Demo'; return const MaterialApp( title: title, home: MyHomePage(title: title), ); } } class MyHomePage extends StatelessWidget { final String title; const MyHomePage({super.key, required this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(title)), body: const Center(child: MyButton()), ); } } class MyButton extends StatelessWidget { const MyButton({super.key}); @override Widget build(BuildContext context) { // The InkWell wraps the custom flat button widget. return 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'), ), ); } }