Set default value for dropdown button2 in flutter - flutter

Question

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

Answer 1

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