Flutter color filling animation-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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