Open In App

Flutter – Ripple Effect

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 16 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads