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!

CodePudding user response：

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