Flutter DropDownButton图标自定义展开背景

Question

我正在尝试弄清楚如何创建这个布局：

但我无法展开下拉按钮，这是我目前可以实现的目标：

不关心宽度扩展，而是关心下拉图标上的蓝色背景。

这是我的代码：

    Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
      ),
      child: IntrinsicWidth(
        child: Padding(
          padding: const EdgeInsets.only(left: 16.0),
          child: StatefulBuilder(builder: (context, miniState) {
            return DropdownButtonHideUnderline(
              child: DropdownButton(
                key: Key(widget.formKey),
                focusColor: Colors.transparent,
                icon: Container(
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                    color: AppColor.primaryBlue,
                  ),
                  child: const Icon(
                    Icons.arrow_drop_down,
                    color: Colors.white,
                  ),
                ),
                value: widget.selectedItem,
                onChanged: (String? value) => setState(() {
                  widget.selectedItem = value!;
                  widget.onValueChanged.call(value);
                }),
                items: widget.items.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Row(
                      children: [Text(value), const SizedBox(width: 4.0)],
                    ),
                  );
                }).toList(),
              ),
            );
          }),
        ),
      ),
    ),

Answer 1

您可以向 Container 添加 height 属性或向 DropdownButton 小部件添加 iconSize 属性。

注意：IconSize 默认值为 25。

您可以按如下方式使用：

          Container(
            //SET HEIGHT
            height: 25,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
            ),
            child: IntrinsicWidth(
              child: Padding(
                padding: const EdgeInsets.only(left: 16.0, right: 1),
                child: StatefulBuilder(builder: (context, miniState) {
                  return DropdownButtonHideUnderline(
                    child: DropdownButton(
                      //OR SET iconSize
                      // iconSize: 45,
                      focusColor: Colors.transparent,
                      icon: Container(
                        decoration: BoxDecoration(
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(10),
                            bottomRight: Radius.circular(10),
                          ),
                          color: Colors.blue,
                        ),
                        child: const Icon(
                          Icons.arrow_drop_down,
                          color: Colors.white,
                        ),
                      ),
                      value: selectedValue,
                      onChanged: (String? value) => setState(() {
                        selectedValue = value!;
                      }),
                      items: list.map((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Row(
                            children: [Text(value), 
                            const SizedBox(width: 4.0)],
                          ),
                        );
                      }).toList(),
                    ),
                  );
                }),
              ),
            ),
          ),

输出如下。