ripple_effect

Create a 2D ripple effect using flutter and dart (Still experimental) Here is a complete explanation on how it works.

Or like in example, create a button pushing a wave behind it

Add ripple effect on a widget

You can add the RippleEffect widget over anything. This will screenshot the background and create a ripple effect. For a best result add this on a background image.

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RippleEffect(
        pulsations: 2.4,
        dampening: .95,
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage('assets/mountain.png'), fit: BoxFit.cover),
          ),
        ),
      ),
    );
  }
}

Parameters

RippleController - trigger a wave manually

You can trigger manually using a RippleController. see Example/lib/button.dart

First add the rippleController on your RippleEffect widget.

RippleEffect(
    rippleController: rippleController,
    child: Container(
        ...
    ),
),

Then call the touch method.

rippleController.touch(position, 100, radius: 32);

Performances

This is for now fully running on CPU as we don't have access to fragmentShader on flutter for now. As you may notice this will make this slower as you run this on big image.

Next experiments

• try using flutter FragmentShader (coming soon on flutter) https://github.com/flutter/engine/pull/26996
• rust + dart ffi
• isolates group to share image memory data