How to handle Spamming Button Click in a Flutter app?

user_4872547 0
Viewed 1160

I read some approaches on this (for example, disabling the button after being tapped.), but this is not my case now.. I can't disable the button.

I have a (Like) Button. If the user taps on it, an insert query will execute on the database, and the button will be marked as (tapped) with a boolean value = true..

Now, if the user taps again, a drop statement will execute on the database to remove that like.

If the user starts to spam tapping on that button, there will be tons of SQL transactions going onto my database server (Insert & Delete will repeat as long as the user clicks the button).

I noticed that I could spam tapping the like button on Facebook itself. So, there should be a good practice to handle that, I just need to know what it is.

Thanks,

flutter
1 Answers

I would do it with a Timer, set a debounce duration to execute the like action. check the example below, I used async's RestartableTimer widget which is just a Timer with a .reset() method:

import 'package:async/async.dart';
import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  RestartableTimer timer;
  bool liked = false;

  onPressed() {
    // switch state instantly so the user doesn't have to wait,
    // (even tho the action is still not executed on the backend/database side)
    setState(() {
      liked = !liked;
    });

    if (timer?.isActive ?? false) {
      timer.reset();
    } else {
      timer = RestartableTimer(Duration(milliseconds: 3000), likeAction);
    }
  }

  likeAction() {
    // execute the action on your database and finally setState accordingly
    print('currentState: $liked' );
    // ..
    // ..
    // ..
    // setState({liked = ..});
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Center(
        child: IconButton(
          icon: Icon(
            liked ? Icons.favorite : Icons.favorite_border,
            size: 36,
          ),
          color: Colors.redAccent,
          onPressed: onPressed,
        ),
      ),
    );
  }
}
user_58299830
Related