# Gesture Detector in Row- Flutter

In flutter, *GestureDetector* is a commonly used widget. It is simply a widget that detects gestures. It can be used to wrap other widgets that you want to be clickable. This enables us to create custom buttons and custom clickable widgets. However, when a Row is wrapped with a *GestureDetector* the *GestureDetector* detects clicks on only the children of the Row and not the entire Row itself. Confused? Take a look at the image below.

On the first *Row*, when the white space between “Press this Text” and “Or press this Text” is clicked, no action is carried out. However, on the second *Row* when the white space is clicked the action is carried out. In this article, we’ll be looking at how to make the entire *Row* clickable and not just children of the *Row*.

> **1.** create your flutter project

This can be achieved by running

`flutter create project_name`

> **2\.** Add this to your main.dart file

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(const MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  const MyApp({Key? key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Row in Gesture Detector',  
      theme: ThemeData(  
        primarySwatch: Colors.*blue*,  
      ),  
      debugShowCheckedModeBanner: false,  
      home: const MyHomePage(title: 'Row in Gesture Detector'),  
    );  
  }  
}  
  
class MyHomePage extends StatefulWidget {  
  const MyHomePage({Key? key, required this.title}) : super(key: key);  
  
  final String title;  
  
  @override  
  State<MyHomePage> createState() => \_MyHomePageState();  
}  
  
class \_MyHomePageState extends State<MyHomePage> {  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold();  
  }  
}

> **3.** Create the increment method to test the gesture behavior

Add this to the `MyHomePageState` class

int \_counter = 0;  
  
void \_incrementCounter() {  
  setState(() {  
    \_counter++;  
  });  
}

> **4.** Create the Row and wrap with Gesture Detector

Add this to the Scaffold body

return Scaffold(  
  appBar: AppBar(  
    title: Text(widget.title),  
  ),  
  body: Center(  
    child: Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: <Widget>\[  
        GestureDetector(  
          onTap: \_incrementCounter,  
          child: Row(  
            mainAxisSize: MainAxisSize.max,  
            mainAxisAlignment: MainAxisAlignment.spaceAround,  
            crossAxisAlignment: CrossAxisAlignment.center,  
            children: const \[  
              Text(  
                'Press this Text'  
              ),  
              Text(  
                'Or press this Text'  
              )  
            \],  
          ),  
        ),  
        const SizedBox(height: 80,),  
        GestureDetector(  
          behavior: HitTestBehavior.opaque,  
          onTap: \_incrementCounter,  
          child: Row(  
            mainAxisSize: MainAxisSize.max,  
            mainAxisAlignment: MainAxisAlignment.spaceAround,  
            crossAxisAlignment: CrossAxisAlignment.center,  
            children: const \[  
              Text(  
                  'Press white space'  
              ),  
              Text(  
                  'Press white space'  
              )  
            \],  
          ),  
        ),  
        const SizedBox(height: 60,),  
        Text(  
          '$\_counter',  
          style: Theme.*of*(context).textTheme.headline4,  
        ),  
      \],  
    ),  
  ),  
);

If you notice in the code, we have two sepeate *Rows* wrapped with *GestureDetector*. One has *behavior* set while the other doesn’t. The *GestureDetector* with *behavior* set is the one that enables the whole Row clickable and I’ll be explaining that shortly.  
The *GestureDetector* widget has a field *behavior* that determines how the *GestureDetector* acts when hit. The *behavior* field is of type *HitTestBehavior*. By default, the *behavior* field is set to *HitTestBehavior.deferToChild* which ensures that the *GestureDetector* receives events only when one of the children of its target is being hit. That sometimes might not be a good user experience. Setting the *behavior* field to *HitTestBehavior.Opaque* enables the *GestureDetector* to receive events as long as the hit was received within the target’s bounds.

#### Conclusion

We have reached the end of this article. I hope it has been helpful so far. If you have any more questions or want to engage feel free to connect with me on [**Twitter**](http://twitter.com/dt_emmy) or [**LinkedIn**](https://www.linkedin.com/in/emmanuel-david-b5a49b158). Do appreciate the article with some claps and comments.

If you want the complete code, here is a link to the [github repository](https://github.com/DeTuksa/Row-In-GestureDetector) of the project.