Home > Mobile >  Putting a list of objects in ItemBuilder, to generate Checkboxes and make Checkboxes clickable. (Dar
Putting a list of objects in ItemBuilder, to generate Checkboxes and make Checkboxes clickable. (Dar

Time:08-24

The problem is, that I don't know how I can make the checkboxes(onchange with the reserved value) get ticked when i click on one. Now I can't click them at all. I want to iterate over the List of Objects in the Itembuilder and use their reserved attribute to have a boolean value for the checkboxes. Also I want that when I click the Checkbox, the Capacity Counter of this object gets clicked, should get plus one. How can I achieve this? Thankful for all tips.This is how it looks like

class Parking extends StatefulWidget {
  const Parking({Key? key, this.bookingdays}) : super(key: key);

  @override
  State<Parking> createState() => _ParkingState();
  final List<Bookingday>? bookingdays;
   
  class _ParkingState extends State<Parking> {
   
    void initState() {
    super.initState();

    final buchungsTage = widget.bookingdays ??
        List<Bookingday>.filled(
            tage.getWeek(_date).length,
            Bookingday(
                day: _date,
                reserved: false,
                capacityCounter: 0,
                maxCapacity: 4));
  }

// and then later in the Build Method:

ListView.builder(
              padding: const EdgeInsets.all(10),
              itemCount: tage.getWeek(_date).length,
              itemBuilder: (context, index) {
                final bookingDays = widget.bookingdays ??
                    List<Bookingday>.filled(
                        tage.getWeek(_date).length,
                        Bookingday(
                            day: _date,
                            reserved: false,
                            capacityCounter: 0,
                            maxCapacity: 4));

                final day = tage.getWeek(_date);
                return Card(
                  child: CheckboxListTile(
                    secondary: Text(
                      Tage.formatDate(day[index]),
                      style: const TextStyle(
                        fontSize: 20,
                      ),
                    ),
                    title: Center(
                      child: Text(
                        '${bookingDays[index].capacityCounter}/$_maxParkPlaces',
                        style: TextStyle(
                          color: _increment != _maxParkPlaces
                              ? Colors.green
                              : Colors.red,
                          fontSize: 20,
                        ),
                      ),
                    ),
                    value: bookingDays[index].reserved,
                    onChanged: (value) => setState(
                      () {
                        bookingDays[index].reserved = value!;
                        bookingDays[index].capacityCounter = 2;
                      },
                    ),
                  ),
                );
              },
            ),
          ),
}

CodePudding user response:

You can follow this model class and widget


class Parking extends StatefulWidget {
  @override
  State<Parking> createState() => _ParkingState();
}

class Item {
  final String data;
  final bool isChecked;

  Item({
    required this.data,
    required this.isChecked,
  });

  Item copyWith({
    String? data,
    bool? isChecked,
  }) {
    return Item(
      data: data ?? this.data,
      isChecked: isChecked ?? this.isChecked,
    );
  }
}

class _ParkingState extends State<Parking> {
  late List<Item> items =
      List.generate(12, (index) => Item(data: "data $index", isChecked: false));
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        padding: const EdgeInsets.all(10),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Card(
            child: CheckboxListTile(
              title: Center(
                child: Text(
                  ' s $index',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
              value: items[index].isChecked,
              onChanged: (value) => setState(
                () {
                  items[index] =
                      items[index].copyWith(isChecked: !items[index].isChecked);
                },
              ),
            ),
          );
        },
      ),
    );
  }
}

CodePudding user response:

try to Put the code below outside of build widget  

final bookingDays = widget.bookingdays ??
                    List<Bookingday>.filled(
                        tage.getWeek(_date).length,
                        Bookingday(
                            day: _date,
                            reserved: false,
                            capacityCounter: 0,
                            maxCapacity: 4));
  • Related