flutter - 如何使InkWell的飞溅可见？

Question

环境

Flutter 1.12.13 + hotfix.9

Dart 2.7.2

问题

我在下面做了这样的代码。

我发现当我点击它时，“InkWell.onTap”会显示在控制台中，但不会发生启动动画(=动画像波浪一样展开)。您能帮助我理解为什么我看不到启动动画吗？

样本

InkWell(
  splashColor: Colors.blueAccent,
  onTap: () {
    print('${DateTime.now()}| InkWell.onTap');
  },
  child: Container(
    color: Colors.lightBlue[100],
    child: Row(
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.lightBlue[50],
                    border: Border.all(),
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text('Text1'),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                    left: 16, top: 8, right: 8, bottom: 8),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text('Text2'),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
)

附加信息

上面的代码仅显示一个浅蓝色正方形，您可以在屏幕截图中找到5。

有人建议这个问题可能是 this的重复。但是，我仍然有问题。

我认为答案基本上是说“将 color属性移到 InkWell小部件的外部”，但是我的情况有多种颜色( Colors.lightBlue[100]和 Colors.lightBlue[50])，所以我不能简单地将 color移到外部。如果我误会了一些，请指正。

Answer 1

要获得涟漪效果，Material小部件必须是InkWell的直接祖先，并且您的InkWell的位置现在整个屏幕上都会产生涟漪效果，我不确定这是否是您想要的效果。

 Material(
          color: Colors.lightBlue[100],
          child: InkWell(
            splashColor: Colors.blueAccent,
            onTap: () {
              print('${DateTime.now()}| InkWell.onTap');
            },
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.lightBlue[50],
                            border: Border.all(),
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text('Text1'),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                            left: 16, top: 8, right: 8, bottom: 8),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text('Text2'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),