How to get the checkbox value for each element in the ListView.builder?

Question

please help me, ive been trying a lot of tutorials but i still failed to checked one checkbox with its value in the ListView.builder.

Below is my code that I supposed to add checkbox with its own value. Each card contain the picture and its description, and the user supposely have to select the picture that they need. With that, the image checked should be store in the firebase database.

//import 'dart:html';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:smartconstructionreport/data/project_model.dart';
import 'package:smartconstructionreport/data/user_model.dart';
import 'package:smartconstructionreport/screens/image_details.dart';
import 'package:smartconstructionreport/screens/project_screen.dart';
import 'package:smartconstructionreport/theme.dart';
import 'package:intl/intl.dart';
import 'dart:ui';
import 'dart:io';


class WorkPerformedForm extends StatefulWidget {
  final Project project;
  final String reportID ;
  final int itemIndex;
  final String albumid;
  const WorkPerformedForm({this.project,  @required this.reportID, this.albumid, this.itemIndex});

  @override
  _WorkPerformedFormState createState() => _WorkPerformedFormState();
}

class _WorkPerformedFormState extends State<WorkPerformedForm> {
  FirebaseFirestore _firebaseFirestore = FirebaseFirestore.instance;

  User user = FirebaseAuth.instance.currentUser;
  UserModel loggedInUser = UserModel();
  final Ref = FirebaseFirestore.instance
      .collection("images")
      .doc('photoid')
      .snapshots();
  ImageDetails date;
  DateTime now = DateTime.now();


  @override
  void initState() {
    super.initState();
    FirebaseFirestore.instance
        .collection("user")
        .doc(user.uid)
        .get()
        .then((value) {
      this.loggedInUser = UserModel.fromMap(value.data());
      // name = value.data()['name'];
      setState(() {});

      //getAlbumID();
    });
    //checklist.forEach((element) => checkboxStatus.add(false));
  }


  List<bool> checkboxStatus = [];
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    String _formatteddate = new DateFormat.yMMMd().format(now).toString();
    double width = MediaQuery.of(context).size.width * 0.5;
    return Scaffold(
      appBar: new AppBar(
        title: FittedBox(
          fit: BoxFit.fill,
          child: Text(
            'Work Performed',
            style: TextStyle(
              fontSize: 25,
              color: Color(0xFF222B45),
              fontFamily: 'Poppins',
              fontWeight: FontWeight.w700,
            ),
          ),
        ),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: kPrimaryColor),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) {
                return ProjectScreen(project: widget.project,);
              }),
            );
          },
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: _firebaseFirestore
            .collection("album")
            .doc(widget.albumid)
            .collection("images")
            .where("photographer", isEqualTo: this.loggedInUser.name)
            //.where("dateUploaded", isEqualTo: _formatteddate)
            .orderBy('dateUploaded', descending: true)
            .snapshots(),
        // ignore: missing_return
        builder: (BuildContext context, snapshot) {
          return snapshot.connectionState == ConnectionState.waiting
              ? Center(child: CircularProgressIndicator())
              : snapshot.hasData
              ? ListView.builder(
              itemCount: snapshot.data.docs.length,
              itemBuilder: (BuildContext context, index){
                return GestureDetector(
                  onTap: (){
                    //print(checkboxStatus.length);
                    print(snapshot.data.docs[index].get('url'));

                    showDialogFunc(context, snapshot.data.docs[index].get('url'), snapshot.data.docs[index].get('stageOfWork'), snapshot.data.docs[index].get('description'));
                  },
                  child: Card(
                    child: Row(
                      children: <Widget>[
                        Container(
                          width: 100,
                            height: 100,
                          child: ImageView(
                              imagePath: snapshot.data.docs[index].get('url'),
                              index: index,
                              photoid: snapshot.data.docs[index].get('photoid'),
                              albumid: widget.albumid,
                              project: widget.project),
                        ),
                        Padding(padding: const EdgeInsets.all(10.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            snapshot.data.docs[index].get('stageOfWork') !=null
                              ?Text(snapshot.data.docs[index].get('stageOfWork'),
                                maxLines: 3,
                                style: TextStyle(
                                  fontSize: 15,
                                  fontFamily: 'Poppin',
                                  fontWeight: FontWeight.bold,
                                )
                            ): Text(
                                  "None",
                                    maxLines: 3,
                                    style: TextStyle(
                                      fontSize: 15,
                                      fontFamily: 'Poppin',
                                      fontWeight: FontWeight.bold,
                                    )),
                            SizedBox( height: 10,),
                              Container(
                              width: width,
                              child: snapshot.data.docs[index].get('description') != null
                              ?Text(
                                snapshot.data.docs[index].get('description'),
                                maxLines: 3,
                                style: TextStyle(
                                  fontSize: 15,
                                  fontFamily: 'Poppin',
                                  fontStyle: FontStyle.italic,
                                ),
                              ): Text(
                                "No description yet",
                                maxLines: 3,
                                style: TextStyle(
                                  fontSize: 15,
                                  fontFamily: 'Poppin',
                                  fontStyle: FontStyle.italic,
                                )),
                            ),
                          ],
                        ),),
                        Padding(padding: const EdgeInsets.all(10.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: <Widget>[
                              Checkbox(
                                value: _checked,
                                onChanged: (value) {
                                  print(checkboxStatus.length);
                                  setState((() {
                                    _checked =
                                    !_checked;
                                  }));
                                },
                                checkColor: Colors.white,
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                );
          })
              : Container();
        },
      ),
    );
  }
}

class ImageView extends StatelessWidget {
  final String imagePath;
  final int index;
  final String photoid;
  final String albumid;
  final Project project;

  ImageView(
      {@required this.imagePath,
        @required this.index,
        @required this.photoid,
        @required this.albumid,
        @required this.project});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        child: Hero(
          tag: 'logo$index',
          child: Image.network(imagePath,
              fit: BoxFit.cover,),
        ),
        onTap: () {

        });
  }
}

showDialogFunc(context,String url, String sow, String decs){
  return showDialog(
    context:context,
    builder: (context){
      return Center(
        child: Material(
          type: MaterialType.transparency,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
            ),
            padding: EdgeInsets.all(15),
            width: MediaQuery.of(context).size.width *0.7,
            height: 320,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.circular(5),
                    child: Image.network(url,
                    width: 200,
                        height: 200,),
                  ),
                  SizedBox(
                    height:20
                  ),
                  sow!=null?
                    Text(
                      sow,
                        maxLines: 3,
                        style: TextStyle(
                          fontSize: 15,
                          fontFamily: 'Poppin',
                          fontWeight: FontWeight.bold,
                        )
                  ):Text(
                      "None",
                      maxLines: 3,
                      style: TextStyle(
                        fontSize: 15,
                        fontFamily: 'Poppin',
                        fontStyle: FontStyle.italic,
                      )),
                  SizedBox(
                      height:10
                  ),
                  decs != null?
                    Text(
                      decs,
                      maxLines: 3,
                      style: TextStyle(
                        fontSize: 15,
                        fontFamily: 'Poppin',
                        fontStyle: FontStyle.italic,
                      ),
                    textAlign: TextAlign.center,
                  ): Text(
                      "No description yet",
                      maxLines: 3,
                      style: TextStyle(
                        fontSize: 15,
                        fontFamily: 'Poppin',
                        fontStyle: FontStyle.italic,
                      )),
                ],
            ),
          ),
        ),
      );
    }
  );
}

here is the interface Interface

Answer 1

You need to save the states of each checkbox in similar things like your list. I would create a Map<String, bool> and update/get the values of each entry. The strings would be the doc ids and the bool the checkbox state concerning the doc id