How to make ListTile only allow one click in Flutter?

Question

I want the ListTile to only allow one click. There is a ListTile that is pushed to another screen when tapped in my app.

When I now click this ListTile multiple times, it pushes to another screen multiple times. I expected the result to be that the ListTile only allows one click and pushes another screen once.

I googled and referenced these questions, but didn't get the expected results:

how to disable button after first click in flutter?, How to prevent multiple click on a gesture?, Elevated Button that can able to click just once -Flutter, Trigger a function only one time after press a button - Flutter, How can I make that the on ttap button only be pressed one time? - Flutter

My code:

ListTile(
  …
  onTap: () {
    …
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => Scaffold(appBar: AppBar())));
  }
),

Feel free to leave a comment if you need more information.

How to make ListTile only allow one click in Flutter? I would appreciate any help. Thank you in advance!

How multiple tapping is happening? From the snippet, nothing seems wrong. Whenever you click the ListTile it directly opens up the new Page unless you're doing some async work onTap which might lead to freezing the screen and the user taps it multiple times. — Burhanuddin Rashid, Jan 20 '23 at 07:04
Hi @BurhanuddinRashid thanks for your comment! Yes you are right there is other code that freezes the screen and user taps it multiple times — My Car, Jan 20 '23 at 07:13

score 1 · Accepted Answer · answered Jan 20 '23 at 06:57

I came up with this solution using ValueNotifier to track the clicked state:

class Sample extends StatefulWidget {
  const Sample({super.key});

  @override
  State<Sample> createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  final clickedStatus = ValueNotifier<bool>(false);

  @override
  void dispose() {
    clickedStatus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder(
          valueListenable: clickedStatus,
          builder: (context, bool isClicked, _) {
            return ListTile(
              tileColor: Colors.grey,
              title: Text('push screen'),
              onTap: isClicked
                  ? () {}
                  : () async {
                      clickedStatus.value = true;
                      await Future.delayed(Duration(seconds: 1));
                      await Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => Scaffold(appBar: AppBar()),
                        ),
                      );
                      // reset after finishing execution
                      clickedStatus.value = false;
                    },
            );
          }),
    );
  }
}

How to make ListTile only allow one click in Flutter?

1 Answers1