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

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,
      });
    });
  },
);

}

CodePudding user response：

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
    });
  }
},

CodePudding user response：

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,
    });
  });
},

CodePudding user response：

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(() {});
            },
          ),
        )

CodePudding user response：

Just add condition inside your onTap

Declare an variable outside build function to handle when was clicked

bool isClicked = false;

Condition in your onTap:

onTap: () {
    if (!isClicked){
      isClicked = true;
      FirebaseFirestore.instance.runTransaction((transaction) async {
        DocumentSnapshot freshSnap =
        await transaction.get(document.reference);
        await transaction.update(freshSnap.reference, {
          'votes': freshSnap['votes']   1,
        });
      });
    }
  },