How to Create Ripple Effect in Flutter

When we hear material design one thing we easily associate with it is ripple effect. The ripple effects are extremely useful in user interface as they can visually inform the user that some action like button click has occurred.

In this blog post, let’s check how to create ripple effect in Flutter.

It’s pretty easy. All you need is to use InkWell widget. The InkWell widget is basically rectangular area which responds to touch with ripples. You just wrap the InkWell widget with something tappable then the ripple effect is ready.

Just see the following Flutter example.

import 'package:flutter/material.dart';

class RippleEffectExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: Main()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Ripple Effect Example'),
      ),
      body: Center(child:InkWell(
      onTap: () {
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        child: Text('Flat Button'),
      ),
    ),
      ),
    );
  }
}

And following is the output of the example.

flutter material ripple effect example

I hope this Flutter tutorial will help you. Thank you for reading!

Leave a Comment

Your email address will not be published. Required fields are marked *