Either zero or 2 or more [DropdownMenuItem]s were detected with the same value this happen when i have three drop downs get from api and two of them depend of what i will choose from the first one when schoose from the three drop downs and select from the first one again got this error about dropdown_button2

[AhmedLSayed9]

Duplicate of #138

[ziad500]

I tried the solution you provided but the same error appears @AhmedLSayed9

[AhmedLSayed9]

Your code is hard to read, can you format it?

You should use:
```dart
yourCode
```

[ziad500]

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../utils/app_colors.dart';

class CustomDropDown extends StatelessWidget {
CustomDropDown(
{super.key,
required this.list,
this.items,
this.height,
this.iconSize = 24,
required this.hint,
this.isEmpty = false,
required this.onOptionSelected,
this.iconColor,
this.onTap,
this.width,
this.title,
this.validator});

final List list;
final List<DropdownMenuItem>? items;
final String hint;
static String? selectedValue;
final void Function(OptionItem?) onOptionSelected;
final double iconSize;
final Color? iconColor;
final bool isEmpty;
final void Function()? onTap;
final double? height;
final double? width;
final String? title;
final String? Function(OptionItem?)? validator;

final TextEditingController textEditingController = TextEditingController();

@OverRide
Widget build(BuildContext context) {
return DropdownButtonFormField2(
isExpanded: true,
hint: Text(
hint,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: AppColors.textColor, fontSize: 16),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
items: items ??
list
.map((item) => DropdownMenuItem(
value: OptionItem(
id: item.id,
title: item.title,
subtitle: item.subtitle,
description: item.description,
image: item.image),
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
item.title,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: AppColors.textColor, fontSize: 16),
),
),
))
.toList(),
validator: validator ??
(value) {
if (value == null) {
return "please enter $title";
}
return null;
},
onChanged: (value) {
onOptionSelected(value);
},
onSaved: (value) {
selectedValue = value.toString();
},
buttonStyleData: const ButtonStyleData(
padding: EdgeInsets.only(right: 8),
),
dropdownStyleData: DropdownStyleData(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
),
menuItemStyleData: const MenuItemStyleData(
padding: EdgeInsets.symmetric(horizontal: 16),
),
);
}
}

class OptionItem extends Equatable {
final String id;
final String title;
final String? subtitle;
final String description;
final String image;

const OptionItem(
{required this.id,
required this.title,
this.description = "",
this.subtitle,
this.image = ""});

@OverRide
List<Object?> get props => [id, title, description, image, subtitle];
}

[AhmedLSayed9]

It still unformatted 😃

[ziad500]

What should i do 😂

[AhmedLSayed9]

Add ```dart at the beginning your code and ``` at the end of your code

[ziad500]

This file contains dropdown widget only

[AhmedLSayed9]

I meant formatting the code here at github

[ziad500]

class CustomDropDown extends StatelessWidget {
CustomDropDown(
{super.key,
required this.list,
this.items,
this.height,
this.iconSize = 24,
required this.hint,
this.isEmpty = false,
required this.onOptionSelected,
this.iconColor,
this.onTap,
this.width,
this.title,
this.validator});

final List list;
final List? items;
final String hint;
static String? selectedValue;
final void Function(OptionItem?) onOptionSelected;
final double iconSize;
final Color? iconColor;
final bool isEmpty;
final void Function()? onTap;
final double? height;
final double? width;
final String? title;
final String? Function(OptionItem?)? validator;

final TextEditingController textEditingController = TextEditingController();
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@OverRide
Widget build(BuildContext context) {
return DropdownButtonFormField2(
isExpanded: true,
hint: Text(
hint,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: AppColors.textColor, fontSize: 16),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
items: items ??
list
.map((item) => DropdownMenuItem(
value: OptionItem(
id: item.id,
title: item.title,
subtitle: item.subtitle,
description: item.description,
image: item.image),
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
item.title,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: AppColors.textColor, fontSize: 16),
),
),
))
.toList(),
validator: validator ??
(value) {
if (value == null) {
return "please enter $title";
}
return null;
},
onChanged: (value) {
onOptionSelected(value);
},
onSaved: (value) {
selectedValue = value.toString();
},
buttonStyleData: const ButtonStyleData(
padding: EdgeInsets.only(right: 8),
),
dropdownStyleData: DropdownStyleData(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
),
menuItemStyleData: const MenuItemStyleData(
padding: EdgeInsets.symmetric(horizontal: 16),
),
);
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class OptionItem extends Equatable {
final String id;
final String title;
final String? subtitle;
final String description;
final String image;

const OptionItem(
{required this.id,
required this.title,
this.description = "",
this.subtitle,
this.image = ""});

@OverRide
List<Object?> get props => [id, title, description, image, subtitle];
} #

[ziad500]

Like this 😅

[AhmedLSayed9]

No. Your code should be formatted like this one:

code

Anyway, You can't use String for selectedValue while using OptionItem as the value of your items.

To be compile-safe, you can annotate your DropdownButtonFormField2 with the type you want. i.e:

return  DropdownButtonFormField2< OptionItem>(
....
);