Need help with dropdownbutton. I need to set a default value for my dropdown_button2. So that when the page opens, already 1 value is selected, which I can change in the future. Can you please tell me how to implement this function? Previously, I tried options that are already on the Internet, but for some reason it was not possible to implement with my code, perhaps I made a mistake somewhere. Thanks in advance.

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;

  @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();
          },
        ),
      ),
    );
  }
}

CodePudding user response：

Add the initState method and set your selectedValue there. Here's your code with the initState added so the dropdown defaults to items[0] but you should update it as it fits your use case.

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 on initState