如何使 InkWell 的飞溅可见？

Question

Environment

• Flutter 1.12.13+hotfix.9
• Dart 2.7.2

Question

I made code like this below.

I find when I tap it, 'InkWell.onTap' shows up in the console, but splash animation (= the animation expanding like a wave) does not happen. Could you help me understand why I cannot see splash animation?

Sample

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

Additional info

The code above only makes a light blue square which you can find 5 in the screenshot.

One person suggested this question is a possible duplicate of this . However, I still have a problem.

I think the answers basically say that "Move the color property to outside of InkWell Widget", but my case has multiple colors ( Colors.lightBlue[100] and Colors.lightBlue[50] ), so I cannot simply move color to outside. Please correct me if I misunderstand something.

Answer 1

To get the ripple effect a Material widget must be a direct ancestor of InkWell with the placement of your InkWell right now your entire screen would have a ripple effect I am not sure if this is the effect you wanted or not.

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