Flutter - Ripple Effect

Last Updated : 04 Mar, 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:

Flutter - Ripple Effect

ddeevviissaavviittaa

Improve

Article Tags :

Flutter - Ripple Effect

Steps to implement inkwell

Step 1 : Creating a simple widget

Step 2 : Using InkWell widget

Complete Source Code (main.dart)

Similar Reads

Thank You!

What kind of Experience do you want to share?