InkWell Vs Gesture Detector: Their Differences

InkWell Vs Gesture Detector: Their Differences

OluwaMayowa's photo
OluwaMayowa
Β·Jun 4, 2022Β·

3 min read

Play this article

Β  Gesture Detector and the Inkwell class are sometimes confused with each other.
What differentiates an inkwell from a gesture detector πŸ˜•? let's try to demystify that.

Leggo! πŸš€

What is a gesture detector πŸ˜•?

According to flutter's official documentation, it says a gesture detector is a widget that detects gestures, and it also attempts to recognize gestures that correspond to its non-null callbacks. By corresponding to non-null callbacks, it responds to intent passed to it, but it is a non-visual widget.
You can visit pub.dev to read more

And an Inkwell ❓

pub.dev defines an inkwell as a rectangular area of a Material that responds to touch, it further explains that the InkWell widget must have a Material widget as an ancestor. The Material widget is where the ink reactions are painted, this matches the material design premise(border/ boundary) wherein the Material is what is reacting to touches by spreading ink. This already indicates that an inkwell has some visual properties when compared to a gesture detector
( Difference already established πŸ’‘).

Now let's get practical about this...

Let's jump into some code writing to further cement our knowledge about a gesture detector and an inkwell. Don't be scared, it's very basic code okay 😏?
let's create a main.dart file and write this piece of code in it

void main() {
  runApp(const MyApp1());
}
class MyApp1 extends StatelessWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  int index = 0;
  var random = Random();

  List myColors = [
    Colors.blue,
    Colors.blueGrey,
    Colors.amberAccent,
    Colors.tealAccent,
    Colors.deepPurpleAccent
  ];

  void changeColor() {
    setState(() {
      index = random.nextInt(4);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.fromLTRB(50, 250, 50, 100),
        child: Center(
          child: Column(
            children: [
              GestureDetector(
                onTap: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const NewScreen()));
                },
                child: Container(
                  height: 150,
                  width: 150,
                  child: const Center(
                      child: Text(
                    'Tap',
                    style: TextStyle(fontSize: 30),
                  )),
                  decoration: BoxDecoration(
                      color: Colors.redAccent,
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: Colors.black)),
                ),
              ),
              const SizedBox(
                height: 50,
              ),
              InkWell(
                splashColor: Colors.limeAccent, highlightColor: Colors.amber,

                onTap: changeColor,
                child: Container(
                  height: 150,
                  width: 150,
                  child: const Center(
                      child: Text(
                    'Tap',
                    style: TextStyle(fontSize: 30),
                  )),
                  decoration: BoxDecoration(
                      color: myColors[index],
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: Colors.black)),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

your results should look something like this

2022-05-24 (3).png Now let's create our NewScreen page, create a new_screen.dart and write this there

class NewScreen extends StatelessWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(color: Colors.cyanAccent),
      child: const Center(child: Text('Welcome to a new Screen', 
      style: TextStyle(color: Colors.black, fontSize: 20),
)
),
    );
  }
}

You should be having something like this by now πŸ‘‡πŸ½ ezgif.com-gif-maker (1).gif πŸ“ŒNotice the yellow splashes when you tap on the inkwell (I mentioned that earlier as ink reactions), the same doesn't happen when you tap on the gesture detector.
From a basic standpoint, this explains the differences between an inkwell and a gesture detector.
However, as you explore these two widgets you would understand their differences from a more practical view.

via GIPHY

Β 
Share this