How to disable onTap function when a single click has been clicked. Using flutter

Question

How to disable onTap function when a single click has been clicked. Using Flutter.

This is my code below, kindly help me check it out...

class VoteCalonUmumPage extends StatelessWidget {
  const VoteCalonUmumPage({Key? key, required this.title}) : super(key: key);
  
  final String title;

  Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
    return ListTile(
      tileColor: Color(0xff99c2ec),
      title: Row(
        children: [
          Expanded(
            child: Text(document['name'],
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 20,
                )),
          ),
          Container(
            decoration: const BoxDecoration(
              color: Color(0xffecc399),
            ),
            padding: const EdgeInsets.all(10.0),
            child: Text(
              document['votes'].toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
          ),
        ],
      ),
      onTap: () {
        FirebaseFirestore.instance.runTransaction((transaction) async {
          DocumentSnapshot freshSnap =
              await transaction.get(document.reference);
          await transaction.update(freshSnap.reference, {
            'votes': freshSnap['votes'] + 1,
          });
        });
      },
    );
  }
}

Answer 1

Checkout below code a simple logic it may help you ,

bool isLoading = false; //global variable

onTap: () {
if(!isLoading)
  {

    isLoading = true;
    try{
      FirebaseFirestore.instance.runTransaction((transaction) async {
        DocumentSnapshot freshSnap =  await transaction.get(document.reference);
        await transaction.update(freshSnap.reference, {'votes': freshSnap['votes'] + 1,});
        isLoading = false;
      });
    }catch((e){
      isLoading = false
    });
  }
},

Answer 2

In order to actually disable the onTap handler you have to pass null to onTap. I would create a variable inside this class to keep track of if the onTap has been pressed yet, and if it has, pass null to onTap rather than your callback function.

onTap: onTapPressed ? null : () {
  setState(() {
    // call set state here so that the UI will be updated.
    onTapPressed = true;
  });
  FirebaseFirestore.instance.runTransaction((transaction) async {
    DocumentSnapshot freshSnap =
    await transaction.get(document.reference);
    await transaction.update(freshSnap.reference, {
      'votes': freshSnap['votes'] + 1,
    });
  });
},

And then in your widget add this member.

bool onTapPressed = false;

---

Also ListTile also has an optional parameter called enabled, which you could set to false instead of passing null to onTap. This approach will disable all handlers on the ListTile, not just the onTap (you might also have an onLongPress handler for example). And it will also update the styling to use the disabled colors from the current Theme.

disabled: !onTapPressed,
onTap: () {
  setState(() {
    // call set state here so that the UI will be updated.
    onTapPressed = true;
  });
  FirebaseFirestore.instance.runTransaction((transaction) async {
    DocumentSnapshot freshSnap =
    await transaction.get(document.reference);
    await transaction.update(freshSnap.reference, {
      'votes': freshSnap['votes'] + 1,
    });
  });
},

Answer 3

Please refer to below code

IgnorePointer is a built-in widget in flutter which is similar to the AbsorbPointer widget, they both prevent their children’s widget from pointer-events which are taping, clicking, dragging, scrolling, and hover.IgnorePointer widget just ignores the pointer-events without terminating it, which means if there is any other element below the IgnorePointer widget tree then it will be able to experience that pointer-event.

bool disableOnClick = false;

IgnorePointer(
          ignoring: disableOnClick ?? false,
          child: ListTile(
            tileColor: Color(0xff99c2ec),
            title: Row(
              children: [
                Expanded(
                  child: Text(document['name'],
                      style: TextStyle(
                        color: Colors.black87,
                        fontSize: 20,
                      )),
                ),
                Container(
                  decoration: const BoxDecoration(
                    color: Color(0xffecc399),
                  ),
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                    document['votes'].toString(),
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ),
              ],
            ),
            onTap: () {
              FirebaseFirestore.instance.runTransaction((transaction) async {
                DocumentSnapshot freshSnap =
                    await transaction.get(document.reference);
                await transaction.update(freshSnap.reference, {
                  'votes': freshSnap['votes'] + 1,
                });
              });
              disableOnClick = true;
              setState(() {});
            },
          ),
        )

Answer 4

you can make condition like :-

set one bool variable and set it true and when user tap on button set it false if you want to permanently disable use prefrences

bool isClicked = true;

GestureDetector(
onTap:  (){
      if(isClicked){
        isClicked = true;
    enter code here
       }

   } 
  child: Container(),
)