InkWell vs GestureDetector

Learn the difference between InkWell and GestureDetector.

Difference between InkWell and GestureDetector

Both InkWell and GestureDetector accept callbacks like onTap and onLongPress. The main difference is visual feedback: InkWell draws a ripple on tap, while GestureDetector is invisible and only reports the gesture. For cases like drag tracking where no visual effect is wanted, GestureDetector is preferred.

// When you want ripple
Material(child: InkWell(onTap: () {}, child: Text('A')))

// When you only want to capture gestures
GestureDetector(onTap: () {}, child: Text('B'))

Which widget should you use?

Use InkWell for a button, card or list item where you want visual feedback. For cases like drag tracking where you only need to capture the gesture and no ripple is needed, GestureDetector is more appropriate. Both support the onTap callback, but only InkWell draws a visual effect.

Exercise Make a button with InkWell

Write a function buttonTapped that prints Button. In main call buttonTapped. Add an InkWell inside the Material and wire onTap to buttonTapped. Do not use GestureDetector.

Show example solution

import 'package:flutter/material.dart';

void butonTiklandi() {
  print('Buton');
}

void main() {
  butonTiklandi();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Material(
            child: InkWell(
              onTap: butonTiklandi,
              child: Container(
                width: 80,
                height: 40,
                color: Colors.green,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Test yourself

What is the main difference between InkWell and GestureDetector?
- GestureDetector does not accept a child
- InkWell does not need Material
- InkWell shows a ripple effect, GestureDetector does not
- InkWell captures only double taps
Show answer

InkWell shows a ripple effect, GestureDetector does not — Both accept similar callbacks; the difference is that InkWell draws a ripple while GestureDetector makes no visual effect.

Add the child parameter

InkWell(
  onTap: () =&gt; print('Tik'),
  ____: Text('Dokun'),
)

Show answer

InkWell(
  onTap: () =&gt; print('Tik'),
  child: Text('Dokun'),
)

InkWell and GestureDetector

InkWell

Shows ripple effect
GestureDetector

Makes no visual effect
onTap

Single tap callback in both
ripple

Found only in InkWell

Next lesson: Material parent

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies