Flutter – Ripple Effect

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.

Let’s better understand these ripple effects using a simple application. To build such an app follow the below steps:

• Create a simple widget that can be tapped.
• Use the InkWell widget to add callback on the tap action.

Let’s discuss them in detail.

Creating a simple widget:

Let’s create a simple widget that has a button that can be tapped using the below code:

Dart

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Hello Geeks!'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text(' Button'),
  ),

Using InkWell widget:

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

Dart

InkWell(
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('Hello Geeks!'),
    ));
  },
  child: Container(
    padding: EdgeInsets.all(12.0),
    child: Text('Button'),
  ),
);

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

Complete Source Code:

Dart

import 'package:flutter/material.dart';

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

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

    return MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

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

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

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

Output: