Search code examples
dartfluttertouchhybrid-mobile-app

How to prevent multiple touch on Flutter Inkwell


I new to flutter and i have a counter button that i want to prevent it from multiple touch.

The Tap Function is defined under Inkwell component (onTap: () => counterBloc.doCount(context)).

if i run this apps and doing multi touch, counter will go up quickly, but i dont want it happen. any idea ?

below are my code :

  Expanded(
  child: Container(
    padding: EdgeInsets.only(right: 16),
    alignment: Alignment.centerRight,
    child: InkWell(
      onTap: () => counterBloc.doCount(context),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Image.asset("assets/images/home/tap.png", scale: 11,),
          StreamBuilder(
            initialData: 0,
            stream: counterBloc.counterStream,
            builder: (BuildContext ctx, AsyncSnapshot<int> snapshot){
              return Text("${snapshot.data}",style: TextStyle(color: Colors.white, fontSize: 120),);
            },
          ),
        ],
      )
    )
  )
)

Solution

  • you can use an AbsorbPointer

    AbsorbPointer(
      absorbing: !enabled,
      child: InkWell(
        onTap: (){
          print('buttonClicked');
          setState(() {
            enabled = false;
          });
        },
        child: Container(
          width: 50.0,
          height: 50.0,
          color: Colors.red,
        ),
      ),
    ),
    

    and when you want to enable the button again, set the enabled to true, don't forget to wrap it with a setState