Question 79344 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter color filling animation

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

enter image description here

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!

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search