Flutter color filling animation

Question

I'm currently working on a flutter project and I was trying to reproduce this dynamic color filling effect:

I've tried to look at the Flutter documentation to see if there is some widget that let me "fill" the container with this color effect, but I didn't find anything relevant.

Is there a way to do this in Flutter? If yes, could you please help me? Thank you!

Gwhyyy · Accepted Answer · 2022-12-09T21:11:27.907

This is called an in-effect or Material ripples effect, and you can achieve it using the InkWell widget like this:

      Material(
            color: Colors.red,
            child: InkWell(
              splashColor: Colors.blue,
              onTap: () {},
              child: Container(
                width: 50,
                height: 50,
                child: Text("test"),
              ),
            ),
          ),

you can show that effect programmatically by the following. first, create a GlobalKey:

final GlobalKey key = GlobalKey();

Then assign it to the InkWell widget so it will be like this:

      Material(
            color: Colors.red,
            child: InkWell(
              key: key,
              splashColor: Colors.blue,
              onTap: () {},
              child: Container(
                width: 50,
                height: 50,
                child: Text("test"),
              ),
            )

then, you can simulate tapping it from other places with this:

void simulateAClick() {
  RenderBox box = key.currentContext!.findRenderObject() as RenderBox;
  Offset position = box.localToGlobal(Offset.zero);

  WidgetsBinding.instance.handlePointerEvent(PointerDownEvent(
    pointer: 0,
    position: position,
  ));
  WidgetsBinding.instance.handlePointerEvent(PointerUpEvent(
    pointer: 0,
    position: position,
  ));
}

now when you run simulateAClick(), you should see a ink effect triggered in the InkWell

Thank you very much! The problem is that the effect should be visible even if the user does not tap on the container. Is there a way to do that? — Sal, Dec 09 '22 at 21:01

score 0 · Answer 2 · answered Dec 09 '22 at 16:39

The FLutter InkWell Widget does something very similar. https://api.flutter.dev/flutter/material/InkWell-class.html

If you want the exact same animation you are probably going to have to build it yourself. Here is the flutter animation tutorial to get you started: https://docs.flutter.dev/development/ui/animations/tutorial

Flutter color filling animation

2 Answers2