Flutter circular ripple effect: How to build beautiful material BottomNavigationBar

Issue

As the Google stadia app is made with flutter I was wondering how they achieved the much more beautiful ripple animation on their BottomNavigationBar.

Example:

How did they achieve the custom ripple animation?

Edit: Simple custom BottomNavigationItem:

bottomNavigationBar: Container(
      height: 50,
      child: Row(
        children: <Widget>[
          Expanded(
            child: BottomItem(),
          ),
          Expanded(
            child: BottomItem(),
          ),
          Expanded(
            child: BottomItem(),
          ),
        ],
      )),

class BottomItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Center(child: Icon(Icons.shop)),
    );
  }
}

Solution

The Ink you're looking for is InkResponse and not InkWell. InkWell fills the entire available space with a highlight and then do the splash but, InkResponse does the splash with that circular effect you're looking for, you need to tweak it a bit, but this is the code example:

Material(
  child: Container(
    child: Center(
       child: InkResponse(
            focusColor: Colors.transparent,
            hoverColor: Colors.transparent,
            highlightColor: Colors.transparent,
            onTap: () {},
            child: Padding(
              padding: const EdgeInsets.all(30),
              child: Icon(Icons.home),
            ),
          ),
        ),
      ),
    )

| InkWell | InkResponse Default | InkResponse Custom |

Answered By - Mariano Zorrilla