Flutter 颤振圆形涟漪效应：如何打造美丽的材质导航栏

我想知道他们是如何在底部导航栏上实现更漂亮的ripple动画的

例如：

他们是如何实现自定义涟漪动画的

编辑：简单自定义底部导航项：

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

您可能希望使用底部导航栏中的：）

---

从InkWell编辑到InkResponse。

您要查找的墨水是而不是

InkWell

。InkWell用一个突出显示填充整个可用空间，然后进行飞溅，但是，

InkResponse

使用您想要的圆形效果进行飞溅，您需要稍微调整一下，但这是代码示例：

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默认值|InkResponse自定义|

谷歌体育场应用程序示例：

注意：使用Material小部件作为行的父级，这样效果可以扩展到所有行宽度，限制条件为“半径：40”

---

是的，他们在某种程度上使用InkWell，但如何使用？涟漪动画在我的自定义BottomNavigationItem的边上被剪裁。他们是如何实现圆形波纹动画的？啊，好的，我现在明白你的意思了。你能上传你的代码吗？我可能对如何实现它有一个想法。我必须睡一会儿，但我的想法如下：如果可以的话，试试它。明天我还会试试：在底部导航栏中，使用堆栈并将不同的按钮放置在它们相关的位置。这样按钮就不会受到左右任何东西的限制，从而可以完成涟漪。哇，这很有帮助！谢谢你是救命恩人，这应该是公认的答案。结果很漂亮，谢谢。

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),
            ),
          ),
        ),
      ),
    )

Container(
      width: double.infinity,
      height: 300,
      child: Material(
        color: Colors.transparent,
        child: Row(
          children: [
            Expanded(
              flex: 20,
              child: InkResponse(
                onTap: () {},
                //containedInkWell: false,
                splashFactory: InkRipple.splashFactory,
                radius: 40,
                splashColor: Colors.black12,
                highlightColor: Colors.transparent,
                child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
              ),
            ),
            Expanded(
              flex: 20,
              child: InkResponse(
                onTap: () {},
                //containedInkWell: false,
                splashFactory: InkRipple.splashFactory,
                radius: 40,
                splashColor: Colors.black12,
                highlightColor: Colors.transparent,
                child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
              ),
            ),
            Expanded(
              flex: 20,
              child: InkResponse(
                onTap: () {},
                //containedInkWell: false,
                splashFactory: InkRipple.splashFactory,
                radius: 40,
                splashColor: Colors.black12,
                highlightColor: Colors.transparent,
                child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
              ),
            ),
            Expanded(
              flex: 20,
              child: InkResponse(
                onTap: () {},
                //containedInkWell: false,
                splashFactory: InkRipple.splashFactory,
                radius: 40,
                splashColor: Colors.black12,
                highlightColor: Colors.transparent,
                child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
              ),
            ),
            Expanded(
              flex: 20,
              child: InkResponse(
                onTap: () {},
                //containedInkWell: false,
                splashFactory: InkRipple.splashFactory,
                radius: 40,
                splashColor: Colors.black12,
                highlightColor: Colors.transparent,
                child: Container(height: double.infinity, alignment: Alignment.center, child: Icon(Icons.search_rounded)),
              ),
            ),
          ],
        ),
      ),
    )