How do I disable the ListTile from within it's own onTap?

Question

I'm doing the flutter baby names codelab and am implementing the transaction to firestore to remedy race conditions. If I spam a name it will result in missed votes and a IllegalStateException.

I want to disable the ListTile from within the onTap as the transaction is being completed and then re-enable it after transaction update.

I tried setting state from within the transaction and that did not work. The code is below.

        child: ListTile(
          title: Text(record.name),
          trailing: Text(record.votes.toString()),
          onTap: () => Firestore.instance.runTransaction((transaction) async {
            final freshSnapshot = await transaction.get(record.reference);
            final fresh = Record.fromSnapshot(freshSnapshot);
            await transaction.update(record.reference, {'votes': fresh.votes + 1});
            ///DOES NOT WORK
            setState(() {
              enabled: false
            });
            ///
          }),

I tried one of the suggestions here but that does not work either. It seems as though the state of the _isEnableTile boolean gets reset even though I never set it back to true. One way that kinda works is by setting _isEnableTile as a feild (i.e on the class level) unfortunately this results in all listtiles being disabled via the 'enabled' parameter.

     Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
        bool _isEnableTile = true;
        final record = Record.fromSnapshot(data);
        return Padding(
          key: ValueKey(record.name),
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(5.0),
            ),
            child: ListTile(
              title: Text(record.name),
              trailing: Text(record.votes.toString()),
              onTap: () async {
                print(_isEnableTile);
                if (_isEnableTile) {
                  _isEnableTile = false;
                  print('doing it');
                  await Firestore.instance.runTransaction((transaction) async {
                    final freshSnapshot = await transaction.get(record.reference);
                    final fresh = Record.fromSnapshot(freshSnapshot);
                    await transaction
                        .update(record.reference, {'votes': fresh.votes + 1});
                  });
                } else {
                  print('hmmm not doing it');
                }
              },
            ),
          ),
        );
      }

The expected behaviour of above code is to be able to tap once and then never be able to tap again since _isEnableTile is never switched back to true. This is not the case. _isEnableTile is reset to true constantly (most probably as soon as the onTap is complete).

EDIT: Unfortunately, you cannot use enabled to switch the enabled state because it is final inside ListTile for some reason.

Answer 1

Take one flag like

bool isEnableTile = true;

and set like

onTap: (isEnableTile == true )? (Code+StateToChange "isEnableTile" to *false*) : null

Answer 2

After spending too long on this problem. I've managed to figure it out.

You need to manage the enabled state at a wider scope and separate from the actual data you get from firebase due to the intended use for the data.

You can see the expected behaviour in the code below:

import 'package:baby_names/my_list_tile.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Baby Names',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Baby Names Codelabs'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Record> _items = new List<Record>();
  Map<String, bool> eState = new Map<String, bool>();
  _MyHomePageState() {
    Firestore.instance.collection('baby').snapshots().listen((data) {
      _items.removeRange(0, _items.length);
      setState(() {
      data.documents.forEach((doc) => _items.add(Record.fromSnapshot(doc)));
            });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.builder(
            padding: const EdgeInsets.only(top: 20.0),
            itemCount: _items.length,
            itemBuilder: (context, index) => _buildListItem(context, index)));
  }

  Widget _buildListItem(BuildContext context, int index) {
    var record = _items[index];
    var e = eState[record.name] == null ? true : eState[record.name];
    return Padding(
        key: ValueKey(record.name),
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey),
            borderRadius: BorderRadius.circular(5.0),
          ),
          child: ListTile(
              title: Text(record.name),
              trailing: Text(record.votes.toString()),
              enabled: e,
              onTap: () =>
                  Firestore.instance.runTransaction((transaction) async {
                    setState(() {
                      eState[record.name] = false;
                    });
                    final freshSnapshot =
                        await transaction.get(record.reference);
                    final fresh = Record.fromSnapshot(freshSnapshot);
                    await transaction
                        .update(record.reference, {'votes': fresh.votes + 1});
                    setState(() {
                      eState[record.name] = true;
                    });
                  })),
        ));
  }
}

class Record {
  final String name;
  final int votes;
  final DocumentReference reference;
  Record.fromMap(Map<String, dynamic> map, {this.reference})
      : assert(map['name'] != null),
        assert(map['votes'] != null),
        name = map['name'],
        votes = map['votes'];

  Record.fromSnapshot(DocumentSnapshot snapshot)
      : this.fromMap(snapshot.data, reference: snapshot.reference);

  @override
  String toString() => "Record<$name:$votes>";
}