0

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

enter image description here

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.

dmjy
  • 1,183
  • 3
  • 10
  • 26
  • Does this answer your question? [InkWell not showing ripple effect](https://stackoverflow.com/questions/45424621/inkwell-not-showing-ripple-effect) – chunhunghan Apr 20 '20 at 02:38
  • @chunhunghan Thank you for your advice. I think I still have a problem. I would appreciate if you could check this updated question. – dmjy Apr 20 '20 at 17:53

1 Answers1

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'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
wcyankees424
  • 2,554
  • 2
  • 12
  • 24