在颤动中为下拉按钮2设置默认值

Question

需要 dropdownbutton 方面的帮助。我需要为 dropdown_button2 设置一个默认值。这样当页面打开时，已经选择了 1 个值，我可以在将来更改它。你能告诉我如何实现这个功能吗？以前，我尝试过互联网上已有的选项，但由于某种原因无法用我的代码实现，也许我在某个地方犯了一个错误。提前致谢。

代码

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;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      decoration: BoxDecoration(
        border: Border(
          bottom: selectedValue != null
              ? const BorderSide(
                  color: constants.Colors.white,
                )
              : BorderSide.none,
        ),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          underline: DropdownButtonHideUnderline(child: Container()),
          hint: Row(
            children: [
              widget.icon ?? const SizedBox(),
              const SizedBox(width: 8),
              const Text(
                'Select',
                style: constants.Styles.bigBookTextStyleWhite,
              ),
            ],
          ),
          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,
                              ),
                            ),
                            if (item == selectedValue)
                              const Icon(
                                Icons.check,
                                color: constants.Colors.purpleMain,
                              ),
                          ],
                        ),
                      ),
                    ),
                  ))
              .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();
          },
        ),
      ),
    );
  }
}

Answer 1

添加 initState 方法并在那里设置您的 selectedValue。这是添加了 initState 的代码，因此下拉列表默认为 items[0]，但您应该更新它以适合您的用例。

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;

  // Add the initState method to your widget
  @override
  void initState() {
    super.initState();

    // Set your "default" value here. This example sets it to items[0]
    if (widget.items.isNotEmpty) {
     selectedValue = widget.items.first;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      decoration: BoxDecoration(
        border: Border(
          bottom: selectedValue != null
              ? const BorderSide(
                  color: constants.Colors.white,
                )
              : BorderSide.none,
        ),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          underline: DropdownButtonHideUnderline(child: Container()),
          hint: Row(
            children: [
              widget.icon ?? const SizedBox(),
              const SizedBox(width: 8),
              const Text(
                'Select',
                style: constants.Styles.bigBookTextStyleWhite,
              ),
            ],
          ),
          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,
                              ),
                            ),
                            if (item == selectedValue)
                              const Icon(
                                Icons.check,
                                color: constants.Colors.purpleMain,
                              ),
                          ],
                        ),
                      ),
                    ),
                  ))
              .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();
          },
        ),
      ),
    );
  }
}

Docs 在 initState

在颤动中为下拉按钮2设置默认值

Set default value for dropdown button2 in flutter

flutter

dart

flutter-layout