Flutter Ripple Effect (original) (raw)

Last Updated : 23 Jul, 2025

In Flutter, the **InkWell widget is used to perform ripple animation when tapped. This effect is common for all the app components that follow the material design guideline. A ripple animation in its simplest term can be understood as a black (default) bar at the bottom of an app that displays some data when a tap is done on the respective component of the application.

Steps to implement inkwell

Step 1 : Creating a simple widget

create a simple widget that has a button that can not interact with user:

Dart `

Container( padding: EdgeInsets.all(12.0), color: Colors.green, child: Text( ' Button', style: TextStyle(color: Colors.white), ), ),

`

To know more about **container in flutter refer this article: Container class in Flutter

Step 2 : Using InkWell widget

Now wrap the widget that we just created above with the _InkWell widget as shown below:

Dart `

InkWell( onTap: () { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text('Hello Geeks!'), )); }, child: Container( padding: EdgeInsets.all(12.0), color: Colors.green, child: Text( ' Button', style: TextStyle(color: Colors.white), ), ), );

`

To know more about **SnackBar in flutter refer this article: Flutter – Snackbar

Now let's build the complete app from the below-given source code.

**Complete Source Code (main.dart)

Dart `

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'GeeksForGeeks';

return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: title,
  home: MyHomePage(title: title),
);

} }

class MyHomePage extends StatelessWidget { final String title;

MyHomePage({super.key, required this.title});

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), backgroundColor: Colors.green, foregroundColor: Colors.white, ), body: Center(child: MyButton()), ); } }

class MyButton extends StatelessWidget { @override Widget build(BuildContext context) { return InkWell( onTap: () { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text('Hello Geeks!'), )); }, child: Container( padding: EdgeInsets.all(12.0), color: Colors.green, child: Text( ' Button', style: TextStyle(color: Colors.white), ), ), ); } }

`

**Output: