Related Articles

Related Articles

Flutter – Ripple Effect
  • Last Updated : 16 Oct, 2020

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Using InkWell widget:

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

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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'),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :