Firestore：如何实现按钮再次点击时移除字段值

I’ve got you covered! Here’s a practical, step-by-step implementation using Flutter and Firestore that handles both saving the field value and deleting it when the button is toggled again:

Step 1: Set Up State & Initial Data Fetch #

First, use a StatefulWidget to track whether the field is saved. We’ll also fetch the initial state from Firestore when the widget loads to reflect the current document status.

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

class SaveDeleteToggleButton extends StatefulWidget {
  final String documentId; // Target Firestore document ID
  final String fieldName; // The field to save/delete
  final dynamic fieldValue; // Value to store for the field

  const SaveDeleteToggleButton({
    super.key,
    required this.documentId,
    required this.fieldName,
    required this.fieldValue,
  });

  @override
  State<SaveDeleteToggleButton> createState() => _SaveDeleteToggleButtonState();
}

class _SaveDeleteToggleButtonState extends State<SaveDeleteToggleButton> {
  bool _isFieldSaved = false;
  bool _isLoading = false;
  late DocumentReference _targetDoc;

  @override
  void initState() {
    super.initState();
    _targetDoc = FirebaseFirestore.instance.collection('your_collection').doc(widget.documentId);
    _fetchInitialFieldState();
  }

  // Check if the field already exists in Firestore on widget load
  Future<void> _fetchInitialFieldState() async {
    setState(() => _isLoading = true);
    try {
      final docSnapshot = await _targetDoc.get();
      if (docSnapshot.exists && docSnapshot.data()!.containsKey(widget.fieldName)) {
        setState(() => _isFieldSaved = true);
      }
    } catch (e) {
      print('Error fetching initial state: $e');
    } finally {
      setState(() => _isLoading = false);
    }
  }

Step 2: Implement the Toggle Action #

Create the onPressed handler that toggles the saved state and runs the corresponding Firestore operation. Use FieldValue.delete() to properly remove the field (setting it to null won’t delete it—it just sets the value to null).

Future<void> _toggleSaveDelete() async {
    setState(() => _isLoading = true);
    try {
      if (_isFieldSaved) {
        // Delete the field from the Firestore document
        await _targetDoc.update({
          widget.fieldName: FieldValue.delete(),
        });
        setState(() => _isFieldSaved = false);
      } else {
        // Save the field value to Firestore
        await _targetDoc.update({
          widget.fieldName: widget.fieldValue,
        });
        setState(() => _isFieldSaved = true);
      }
    } catch (e) {
      print('Error updating Firestore: $e');
      // Add a snackbar or alert here to notify the user of the error
    } finally {
      setState(() => _isLoading = false);
    }
  }

Step 3: Build the UI with Conditional Text #

Render the button and the associated text that disappears when the field is deleted:

@override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: _isLoading ? null : _toggleSaveDelete,
          child: _isLoading
              ? const CircularProgressIndicator(color: Colors.white)
              : Icon(
                  _isFieldSaved ? Icons.check_circle : Icons.add_circle,
                  size: 20,
                ),
        ),
        const SizedBox(width: 8),
        // Show the text only when the field is saved
        if (_isFieldSaved && !_isLoading)
          Text(widget.fieldValue.toString()),
      ],
    );
  }
}

Key Details to Remember: #

• FieldValue.delete(): This is the official method to remove a field from a Firestore document. Avoid using null here—it won’t delete the field, just set its value to null.
• Initial State Check: Ensures the button starts in the correct state (checked if the field already exists in Firestore).
• Loading State: Prevents multiple rapid clicks and gives visual feedback to the user during Firestore operations.
• Conditional Text: The text next to the button only appears when the field is saved, matching your requirement that it disappears on the second click.

To use this widget, simply pass your document details:

SaveDeleteToggleButton(
  documentId: 'user_456',
  fieldName: 'favoriteHobby',
  fieldValue: 'hiking',
)

内容的提问来源于stack exchange，提问作者SK1dev