Best way to increase GestureDetector area

user_8912318 0
Viewed 1141

What is the best way to increase the GestureDetector area?

I'd like to avoid to use a Container with custom width and height

I've a Card with this Row:

child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
        new IconButton(
            icon: new Icon(
                Icons.remove,
                color: Colors.white,
                ),
            onPressed: () => { _decreaseCounter() },
            ),
        GestureDetector(
            child: Text(
               _counter.toString(),
               style: new TextStyle(
                   color: Colors.white,
                   fontSize: 18.0,
                   fontWeight: FontWeight.bold),
               ),
               onTap: () => _openDialog(),
            ),
         new IconButton(
             icon: new Icon(
                 Icons.add,
                 color: Colors.white,
                 ),
                 onPressed: () => { _increaseCounter()},
)

when I tap on the Text it should open a dialog, but the GesutreDetector area is very small and it's very difficult to open the dialog. So what I need is to increase this detection area.

flutter-widget flutter-layout flutter
1 Answers

There you go, this is a full working demo for you to implement. As you can see we are printing the following areas in the example below. I wrapped the whole row with another GestureDetector with hittestbehaviour.transcluent. This means it listens to behind elements and still recognizes events. That's why we also don't need GestureDetector on text anymore. If you click on add or remove, click gets tracked as an event, if you click on the next, next to it, or on any other point inside your row, you can do a function on it.

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(home: TestPage()));
}

class TestPage extends StatefulWidget {
  //static const routeName = '/';

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

@override
  Widget build(BuildContext context) {

return Scaffold(
      appBar: AppBar(),
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () => print('COUNTER'),
              child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
          new IconButton(
              icon: new Icon(
                  Icons.remove,
                  color: Colors.white,
                  ),
              onPressed: () => print('REMOVE'),
              ),
          GestureDetector(
              child: Text(
                 'counter',
                 style: new TextStyle(
                     color: Colors.white,
                     fontSize: 18.0,
                     fontWeight: FontWeight.bold),
                 ),
                 //onTap: () => 
              ),
           new IconButton(
               icon: new Icon(
                   Icons.add,
                   color: Colors.white,
                   ),
                   onPressed: () => print('ADD'),
)]),
      ));



  }
}
user_121868510
Related