如何在 Listview 中编辑特定的压制卡并将其更新为 firestore flutter

Question

I have a streambuilder that streams data from education collection and display a listview consist of cards. I have added gesture detector with edit icon in trailing of listview.

This is my streambuilder:

StreamBuilder<
    List<MyEducation>>(
stream: readEducation(),
builder:
    ((context, snapshot) {
  if (snapshot.hasError) {
    return Text(
        'Something went wrong ${snapshot.error}');
  } else if (snapshot
      .hasData) {
    final educations =
        snapshot.data!;

    return ListView(
      scrollDirection:
          Axis.vertical,
      shrinkWrap: true,
      children: educations
          .map(
              buildEducation)
          .toList(),
    );
  } else {
    return Center(
      child:
          CircularProgressIndicator(),
    );
  }
},),
)//streambuilder

This is the stream of list and the ListTile

 Stream<List<MyEducation>> readEducation() => FirebaseFirestore.instance
      .collection('education')
      .snapshots()
      .map((snapshot) => snapshot.docs
          .map((doc) => MyEducation.fromJson(doc.data()))
          .toList());

  Widget buildEducation(MyEducation educationss) => ListTile(
        enabled: isEnabled,
        leading: CircleAvatar(
          child: Image.network(educationss.universityImage),
        ),
        title: Text(educationss.universityName),
        // The icon button which will notify list item to change
        trailing: GestureDetector(
          child: new Icon(
            Icons.edit,
            color: Colors.black,
          ),
          onTap: () {
            openDialog(); //the opendialog for form
            setState(() {
              isEnabled = !isEnabled;
            });
          }, //this is the button edit
        ),
      );

After the opendialog is opened, I display form any user insert the data again then run this.

This is just the CreateEducation method:

Future createEducationCollege() async {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => const Center(
        child: CircularProgressIndicator(),
      ),
    );

    try {
      String date1 = selectedMonthStart! + " " + selectedYearStart.toString();
      print(date1);
      // DateFormat datestart = DateFormat.yMMMM(date1);
      // print(datestart);
      String date2 = selectedMonthEnd! + " " + selectedYearEnd.toString();
      print(date2);
      // DateFormat dateend = DateFormat.yMMMM(date2);
      // print(dateend);
      print(FirebaseAuth.instance.currentUser?.uid);
      final docEducation =
          FirebaseFirestore.instance.collection("education").doc();
      final uid = FirebaseAuth.instance.currentUser!.uid;
      final userEducation = MyEducation(
        uid: uid,
        universityName: collegeAheadController.text,
        universityImage: imageuniversitycollege,
        major: SelectedMajor.toString(),
        degree: SelectedDegree.toString(),
        dateEnd: date1,
        dateStart: date2,
      );
      final json = userEducation.toJson();

      await docEducation.set(json);
    } on FirebaseException catch (e) {
      Utils.showSnackBar(e.message);
    }

    //Navigator.of(context) not workking!!
    navigatorKey.currentState!.popUntil((route) => route.isFirst); 
}

How to change this into update the selected item for the firestore database?

Actually I have no experience in edit selected data. I have search about edit selected data but its usually about users collection. How can I make the system know which list to change? I'm thinking of compare using equal to in.where() and change.set to.update.

Answer 1

Streambuilder listens to events coming from the stream not from your variables.You can have your stream as a state variable and when you change your date change your stream and the data will be refreshed.Widget rebuilding is scheduled by each interaction, using State.setState, but is otherwise decoupled from the timing of the stream.The FlutterFire documentation includes an example on how to listen to Firestore for events that can be used to update the widget. The same documentation page has a guide on how to update a value in the Firestore document with the update method.

DatabaseReference databaseRef; 
// initState() databaseRef = _database.child(widget.latestPath); 
// build return StreamBuilder( stream: databaseRef.onValue, builder: (context, snapshot) { // Do something with the data }, );
// When u want to update new path setState(() { databaseRef = _database.child(widget.newPath);; 
});

While working with the pressed card and widgets you need to wrap your functions with setState. onPressed: () { setState(() { _visibleBehavior = true; }) } Also you can try and use the setState method and refactor your pressed card details from StatelessWidget to StatefullWidget.
You can check the following similar examples:

• How to change data in Firestore using button in flutter
• Flutter update UI on button press
• Update field of a document in firestore
• Change card color in alertdialog option