Home > Software design >  How to get the index of each element in a list flutter?
How to get the index of each element in a list flutter?

Time:05-07

I ran into a problem. I have a Checkbox in the value method, I need to specify _isChecked[index]. But I have an error on the word index. I understand why the error is because I don't get the index of each element, I don't have these given. Do I need to iterate through all the elements of the list to solve? Or how can I get all index elements?

code

class DropdownWidget extends StatefulWidget {
  List<String> items;
  SvgPicture? icon;
  double width;

  DropdownWidget({
    Key? key,
    required this.items,
    required this.icon,
    required this.width,
  }) : super(key: key);

  @override
  State<DropdownWidget> createState() => _DropdownWidgetState();
}

class _DropdownWidgetState extends State<DropdownWidget> {
  String? selectedValue;
  bool isChecked = false;

  List<bool> _isChecked = [];

  @override
  void initState() {
    super.initState();
    if (widget.items.isNotEmpty) {
      selectedValue = widget.items[1];
    }
    _isChecked = List<bool>.filled(widget.items.length, false);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          items: widget.items
              .map((item) => DropdownMenuItem<String>(
                    value: item,
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                            color: constants.Colors.white.withOpacity(0.1),
                            width: 1,
                          ),
                        ),
                      ),
                      child: Center(
                        child: Row(
                          children: [
                            if (item == selectedValue)
                              const SizedBox(
                                width: 0,
                              ),
                            Expanded(
                              child: Text(
                                item,
                                style: constants.Styles.smallTextStyleWhite,
                              ),
                            ),
                            Checkbox(
                              value: _isChecked[index],
                              onChanged: (val) {
                                setState(() {
                                  _isChecked[index] = val!;
                                });
                              },
                            )
                          ],
                        ),
                      ),
                    ),
                  ))
              .toList(),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          icon: SvgPicture.asset(constants.Assets.arrowDropdown),
          iconSize: 21,
          buttonHeight: 27,
          itemHeight: 47,
          dropdownMaxHeight: 191,
          dropdownWidth: 140,
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: constants.Colors.purpleMain,
            ),
            color: constants.Colors.greyDark,
          ),
          selectedItemBuilder: (context) {
            return widget.items.map(
              (item) {
                return Row(
                  children: [
                    widget.icon ?? const SizedBox(),
                    const SizedBox(width: 8),
                    Text(
                      item,
                      style: constants.Styles.bigBookTextStyleWhite,
                    ),
                  ],
                );
              },
            ).toList();
          },
        ),
      ),
    );
  }
}

List

final List<String> carList = const [
    "All EV's",
    'Main EV',
    '<EV2>',
  ];

CodePudding user response:

you can convert the list to a map and iterate on its keys, which will be the indices of the elements

widget.items.asMap().keys.map((index) {
            return Container(
              child: widget.items[index];
            );
          }).toList(),
  • Related