How to Solve if InkWell Not Showing Ripple Effect In Flutter ?

· 3 min read
How to Solve if InkWell Not Showing Ripple Effect In Flutter
How to Solve if InkWell Not Showing Ripple Effect In Flutter

An easy way to achieve a ripple effect on your flutter app by using the ripple_effect plugin so in today’s article we will walk through How to Solve if InkWell Not Showing Ripple Effect In Flutter.

How to Solve if InkWell Not Showing Ripple Effect In Flutter??

Using Inkwell effect code snippet will look like a below:

body: new Center(
  child: new Container(
    child: new Material(
      child: new InkWell(
        onTap: (){print("tapped");},
        child: new Container(
          width: 100.0,
          height: 100.0,
        ),
      ),
      color: Colors.transparent,
    ),
    color: Colors.orange,
  ),
),

just click the middle square.

InkWell() will never show the ripple effect until you add the

onTap : () {}

or any of the callbacks like onDoubleTap, onLongPress, etc. parameter inside the InkWell as it starts listening to your taps only when you specify this parameter.

Simply use the Ink widget wrapped in an InkWell. Consider a code snippet like the below:

InkWell(
  onTap: () {}, // needed
  child: Ink( // use Ink
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

The above code will give us output like the below:

Inkwell In Flutter
Inkwell In Flutter
  • The InkWell widget must have a Material widget as an ancestor otherwise it can’t show effects.
    Material(
      child : InkWell(
        child : .....
    )
    )
  • You have to add onTap() method to see the actual effects as like
    Buttons {RaisedButton,FlatButton etc}.
    e.g -> Material(
                child : InkWell(
                        onTap : (){}
                        child : .....
  • If you want a Ripple Effect on any widget just:
    • Wrap widget with Material and Inkwell.
    • set color to the widget from Material.
    • Never set the color to the widget you want to ripple.
        Material (
        color: const Color(0xcffFF8906),
        child: InkWell(
        ontap:() { },
        child: Container(
        color: Colors.transparent,
        height: 80,
        width: 80,
      )

Best Way :

  • Wrap your widget with InkWell()
  • Wrap InkWell with Material
  • Set the opacity 0% anyhow. e.g.: color: Colors.white.withOpacity(0.0),
    Material(
      color: Colors.white.withOpacity(0.0),
      child: InkWell(
        child: Container(width: 100, height: 100),
        onTap: (){print("Wow! Ripple");},
      ),
    )

Conclusion:

Thanks for being with us on a Flutter Journey!!!

Keep Learning!!! Keep Fluttering!!!

In this article, we have been through how to Solve if InkWell Not Showing Ripple Effect In Flutter.

Do let us know if you need any assistance with flutter development?? We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply