All checkboxes in Flutter checkbox Listtile are checked at the same time

Question

I created a checkbox Listtile, where I can click on an Info button to receive further info if neccessary. Therefore I created a main Widget which contains the Listtile widget. When the Info button gets clicked, the detail page opens and reads the specific details from the model class.Up to that point everything works fine. My leading is a checkbox. If it gets clicked not just one checkbox gets checked, but all of them. how can I write my code, that they arent checked all at the same time automatically? thank you very much for your help Kind regards Here is my code:

//This is my model
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';



class Info {
  String title;
  String description;

  //String image;

  Info(
      {required this.title,
    required this.description,
    // @required this.image
  });
}



  List<Info> ModelList = [
    Info(
      title: 'title1',
      description: 'description1'
    ),


    Info(
        title: 'title2',
        description: 'description2'
    ),
  ];
//This is the widget

class MainWidget extends StatefulWidget {

  const MainWidget({Key? key}) : super(key: key);

  @override
  State<MainWidget> createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder
        (itemCount: ModelList.length,
      itemBuilder: (context,index)
        {Info cardname = ModelList[index];
          return Card(
              child: CheckboxListTile(


                tileColor: const Color(0xFF5D6D7E),
                shape: RoundedRectangleBorder(
                  side: const BorderSide (color:Colors.white,width: 2),
                  borderRadius: BorderRadius.circular(10),
                ),


                contentPadding: const EdgeInsets.symmetric(vertical: 10.0),

                  value: timeDilation !=1.0,

                  onChanged: (bool? value) {

                   setState (() {

                    timeDilation = value! ? 5.0 : 1.0;


                   });
                  },


                title: Text(
                  cardname.title,
                  style: const TextStyle(
                      fontSize: 25.0,
                      fontWeight: FontWeight.w600,
                      color: Colors.white),
                ),

                //an welcher Stelle die Checkbox ist (links oder rechts)
                controlAffinity:
                ListTileControlAffinity.leading,
                secondary: IconButton(icon: const Icon(Icons.info_outlined,size: 40,color: Colors.orange,), onPressed: () {



                  Navigator.push(context, MaterialPageRoute(builder: (context)=> DetailScreen(cardname)
                  ));








                },),
              )

          );

        }
        ,),

    )
    ;

  }
}


//Detail screen
//Detail Screen;

class DetailScreen extends StatelessWidget {
  final Info cardname ;
    const DetailScreen (this.cardname, {super.key});

  //const DetailScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: customAppBar

        ((cardname.title),),


      body:  Padding(
        padding: const EdgeInsets.all(8.0) ,
child: SingleChildScrollView(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      

     // Image.network(
       // cardname.imageUrl,
        //height: 500,
      //),
      // 


      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          cardname.description,
          textAlign: TextAlign.justify,
          style: const TextStyle(fontSize: 22.0),
        ),
      ),


    ],
  ),
),

      ) ,

    );
  }
}

I tried to put the Item builder in an extra widget and return it into the main widget as shown below, but this didn`t work as well

    class SubWidget extends StatefulWidget {

  const SubWidget({Key? key}) : super(key: key);

  @override
  State<SubWidget> createState() => _SubWidgetState();
}

class _SubWidgetState extends State<SubWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder
        (itemCount: ModelList.length,
      itemBuilder: (context,index)
        {Info cardname = ModelList[index];
          return MainWidget()

Answer 1

Add variable is isSelected bool for Info class

And after onChanged change value: isSelected = !isSelected

Try this:

class Info {
  String title;
  String description;
  bool isSelected;
  //String image;

  Info({
    required this.title,
    required this.description,
    required this.isSelected,
    // @required this.image
  });
}

List<Info> ModelList = [
  Info(title: 'title1', description: 'description1', isSelected: false),
  Info(title: 'title2', description: 'description2', isSelected: false),
];
//This is the widget

class MainWidget extends StatefulWidget {
  const MainWidget({Key? key}) : super(key: key);

  @override
  State<MainWidget> createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  double timeDilation = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: ModelList.length,
        itemBuilder: (context, index) {
          Info cardname = ModelList[index];
          return Card(
            child: CheckboxListTile(
              tileColor: const Color(0xFF5D6D7E),
              shape: RoundedRectangleBorder(
                side: const BorderSide(color: Colors.white, width: 2),
                borderRadius: BorderRadius.circular(10),
              ),

              contentPadding: const EdgeInsets.symmetric(vertical: 10.0),

              value: cardname.isSelected,

              onChanged: (bool? value) {
                setState(() {
                  cardname.isSelected = !cardname.isSelected;
                });
              },

              title: Text(
                cardname.title,
                style: const TextStyle(
                    fontSize: 25.0,
                    fontWeight: FontWeight.w600,
                    color: Colors.white),
              ),

              //an welcher Stelle die Checkbox ist (links oder rechts)
              controlAffinity: ListTileControlAffinity.leading,
              secondary: IconButton(
                icon: const Icon(
                  Icons.info_outlined,
                  size: 40,
                  color: Colors.orange,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailScreen(cardname),
                    ),
                  );
                },
              ),
            ),
          );
        },
      ),
    );
  }
}