Блог

У меня есть следующий выпадающий список:

 DropdownButtonFormField(
        isExpanded: true,
        isDense: true,
        value: dropdownValue,
        icon: SvgPicture.asset(
          AppImages.ic_expand_dropdown,
        ),
        iconDisabledColor: AppColors.colorDarkGray,
        iconEnabledColor: AppColors.colorDarkGray,
        focusNode: widget.focusNode,
        validator: widget.validator,
        decoration: InputDecoration(
          label: widget.widgetLabel,
          labelStyle:
              widget.labelStyle ?? AppTextStyles.transparentBlueDark16(),
          labelText: widget.isLabelRes
              ? AppLocales.getTextOrNull(widget.label)
              : widget.label,
          fillColor: Colors.white,
          filled: true,
          hintText: widget.pickerPlaceholder,
          hintStyle: widget.hintStyle ?? AppTextStyles.alto16(),
          alignLabelWithHint: true,
          errorText: widget.isErrorRes
              ? AppLocales.getTextOrNull(widget.error)
              : widget.error,
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 0,
            vertical: 0,
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color:
                  widget.enabledBorderColor ?? AppColors.colorInputBorder,
            ),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: widget.focusedBorderColor ?? AppColors.colorAccent,
            ),
          ),
          errorBorder: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: AppColors.colorError,
            ),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color: widget.borderColor ?? AppColors.colorInputBorder,
            ),
          ),
        ),
        style: AppTextStyles.grayDark16(
          fontWeight: AppFontWeight.medium,
        ),
        onChanged: (String? newValue) {
          dropdownValue = newValue;
          widget.onChanged(dropdownValue!);
        },
        items: widget.pickerList.map<DropdownMenuItem<String>>((value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                  ),
                  child: Text(
                    value,
                    style: AppTextStyles.grayDark16(
                      fontWeight: AppFontWeight.medium,
                    ),
                  ),
                ),
                Visibility(
                  child: Divider(
                    color: AppColors.colorEden10,
                    height: 2.0,
                    indent: 10.0,
                    endIndent: 10.0,
                  ),
                  visible: widget.pickerList.last != value,
                ),
              ],
            ),
          );
        }).toList(),
      ),
 

Мне нужно отобразить разделители между предметами. Поскольку я не нашел возможности добавить его, как в списке, я добавил разделитель, создав столбец, содержащий текст и разделитель, который отображается в некоторых случаях. Но проблема в том, что при выборе разделителя элементов в результате также отображается в раскрывающемся списке, и я не вижу возможности скрыть его здесь. Есть ли способ добавить разделитель, не отображая его после выбора элемента?

Чтобы избежать разделителя выбранных элементов, нам нужно использовать selectedItemBuilder: . По умолчанию он использует items макет.

Вы можете использовать на DropdownButtonFormField , как

  selectedItemBuilder: (context) => widget.pickerList
          .map(
            (text) => Text(text),
          )
          .toList(),

 

Вы можете настроить свою собственную логику для создания пользовательского интерфейса.
И упрощенный фрагмент состояния-это

 
  late List<DropdownMenuItem<String>> menuItems = [];

  @override
  void initState() {
    super.initState();
    dropdownValue = widget.pickerList.first;

    for (int i = 0; i < widget.pickerList.length; i  ) {
      //* on 1st index there will be no divider
      i == 0
          ? menuItems.add(
              DropdownMenuItem<String>(
                child: Text(
                  widget.pickerList[i],
                ),
                value: widget.pickerList[i],
              ),
            )
          : menuItems.add(
              DropdownMenuItem<String>(
                child: Container(
                  width: double.maxFinite,
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(
                    top: 6, // adjust the way you like
                  ),
                  decoration: const BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: Colors.grey,
                        width: 2,
                      ),
                    ),
                  ),
                  child: Text(
                    widget.pickerList[i],
                  ),
                ),
                value: widget.pickerList[i],
              ),
            );
    }
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String>(
      isExpanded: true,
      isDense: true,
      value: dropdownValue,
      onChanged: (String? newValue) {
        // dropdownValue = newValue;
        // widget.onChanged(dropdownValue!);
      },
      items: menuItems,
      selectedItemBuilder: (context) => widget.pickerList
          .map(
            (text) => Text(text),
          )
          .toList(),
    );
  }