How to access properties from a list and populate a widget?

Question

I have a list of objects:

List<Doctor> doctorsList = [
  Doctor(
      name: "Doctor 1 Olly",
      type: "Dentist",
      info:
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
      star: "4.9",
      imageUrl: "img/doctors/doc1.jpg",
      startHour: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 6, 0),
      endHour: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 15, 0),
      duration: 15),
  Doctor(
      name: "Doctor Ilhan",
      type: "Ear Doctor",
      info:
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
      star: "4.9",
      imageUrl: "img/doctors/doc2.jpg",
      startHour: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 5, 0),
      endHour: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day, 15, 0),
      duration: 30),................

I want to populate a widget with the information from the list. For this purpose, I came up with this piece of code:

  void initState() {
    super.initState();

    for (var i = 0; i < doctorsList.length; i++) {
      Doctor doctor = doctorsList[i];
      print(doctorsList[i].name);
      bookingCalendarModel = new BookingModel(
          apptName: 'Mock Service',
          apptDuration: doctor.duration,
          bookingEnd: doctor.endHour,
          bookingStart: doctor.startHour);
    }
  }

However, it does not work because when the user clicks on a specific item, only the last object's information is rendered on the screen. Could you please give me an advice how can i fix this?

---

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Book now!'),
      ),
      body: Center(
          child: BookingCalendar(
        bookingService: bookingCalendarModel,
        convertStreamResultToDateTimeRanges: convertStreamResultMock,
        getBookingStream: getBookingStreamMock,
        uploadBooking: uploadBookingMock,
        pauseSlots: generatePauseSlots(),
        hideBreakTime: false,
        loadingWidget: const Text('Fetching data...'),
        uploadingWidget: const CircularProgressIndicator(),
        locale: 'en_US',
        startingDayOfWeek: CalendarDays.monday,
        wholeDayIsBookedWidget: const Text('Fully booked! Choose another day'),
        //disabledDates: [DateTime(2023, 1, 20)],
        //disabledDays: [6, 7],
      )),
    );
  }

or

 return Container(
      height: 780,
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: doctorsList.length,
          itemBuilder: (context, index) {
            return Column(
              children: [
                BookingCalendar(
                  bookingService: bookingWidgetList[index],
                  convertStreamResultToDateTimeRanges: convertStreamResultMock,
                  getBookingStream: getBookingStreamMock,
                  uploadBooking: uploadBookingMock,
                  pauseSlots: generatePauseSlots(),
                  hideBreakTime: false,
                  loadingWidget: const Text('Fetching data...'),
                  uploadingWidget: const CircularProgressIndicator(),
                  locale: 'en_US',
                  startingDayOfWeek: CalendarDays.monday,
                  wholeDayIsBookedWidget:
                      const Text('Fully booked! Choose another day'),
                  //disabledDates: [DateTime(2023, 1, 20)],
                  //disabledDays: [6, 7],
                ),
              ],
            );
          }),
    );

Answer 1

you should use another list of objects to convert objects, your mistake is using a one model

List<BookingModel> bookingCalendarList= [];
void initState() {
    super.initState();

    for (var i = 0; i < doctorsList.length; i++) {
      Doctor doctor = doctorsList[I]; 
      bookingCalendarList.add(
        BookingModel(
          apptName: 'Mock Service',
          apptDuration: doctor.duration,
          // or this apptDuration: doctorsList[i].duration,
          bookingEnd: doctor.endHour,
          bookingStart: doctor.startHour)
        )
    }
  }

then you can use a new list in your listview to show in the UI