我在这里使用两个下拉菜单。我的下拉菜单将交替工作,我们在选择城市后从第一个下拉菜单中选择城市我会得到网点然后我会显示网点。
在这里,如果我要更改我的城市,我想要选择我的两个下拉列表时,我的出口数据将被清除,因为我可以选择另一个出口。
这是我的错误
There should be exactly one item with [DropdownButtonFormField]'s value: Instance of 'OutletList'.
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:dropdown_button2/dropdown_button2.dart':
Failed assertion: line 1223 pos 11: 'items == null ||
items.isEmpty ||
value == null ||
items.where((DropdownMenuItem<T> item) {
return item.value == value;
}).length ==
1'
这是我的代码
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'dart:ui';
import '../../BlocPages/CubitPage/OutletCubit/outlet_cubit.dart';
import '../../BlocPages/CubitPage/OutletCubit/outlet_state.dart';
import '../../Models/outlet_city_list_model.dart';
import '../../Models/outlet_list_model.dart';
import '../ConstantsPages/toast_page.dart';
import '../GlobalColor/global_color.dart';
import '../GlobalTextStyles/global_text_styles.dart';
import '../GlobalWidgetPages/center_text_with_container.dart';
import '../GlobalWidgetPages/double_btn_in_single_row.dart';
class OutletDialogPage extends StatefulWidget {
final String title;
final List<OutletCityListModel> data;
const OutletDialogPage({
Key? key,
required this.title,
required this.data,
}) : super(key: key);
@override
State<OutletDialogPage> createState() => _OutletDialogPageState();
}
class _OutletDialogPageState extends State<OutletDialogPage> {
List<OutletCityListModel> cityList = [];
List<OutletList> outletList = [];
String outletAddress = "";
String outletName = "";
List<OutletListModel>? selectedData;
@override
void initState() {
print(selectedData);
print("my data ${widget.data.length}");
super.initState();
cityList = widget.data.toList();
}
@override
Widget build(BuildContext context) {
return Dialog(
insetPadding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(context),
);
}
}
double t4Size = 14;
extension widgetExtension on _OutletDialogPageState {
dialogContent(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.3, sigmaY: 3.3),
child: Dialog(
insetPadding: EdgeInsets.only(top: 30, bottom: 30, left: 0, right: 0),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
// backgroundColor: skyBlue,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
decoration: new BoxDecoration(
color: MyColor.whiteColor,
shape: BoxShape.rectangle,
boxShadow: [
BoxShadow(
color: MyColor.blackColor.withOpacity(0.2),
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
decoration: new BoxDecoration(
color: MyColor.primaryRedColor,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: CenterTextWithContainer(txt: "${widget.title}"),
),
Container(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
top: 23.0, left: 20, right: 20, bottom: 0),
child: DropdownButtonFormField2(
itemSplashColor: MyColor.lightBlueColor,
itemHeight: 36,
itemHighlightColor: MyColor.greyColor2,
dropdownMaxHeight: 200,
dropdownPadding: EdgeInsets.only(left: 2, right: 2),
selectedItemHighlightColor: MyColor.lightBlueColor,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: MyColor.darkGreyColor),
borderRadius: BorderRadius.circular(8.0),
),
isDense: true,
contentPadding: EdgeInsets.zero,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
isExpanded: true,
hint: Row(
children: [
Container(
height: 18,
width: 18,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/outline_location_pin.png'),
fit: BoxFit.fill,
)),
),
SizedBox(
width: 4,
),
Expanded(
child: Text(
'Select City',
style: textStyleWith12400(
MyColor.darkGreyColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
icon: const Icon(
Icons.arrow_drop_down,
color: MyColor.darkGreyColor,
),
// iconOnClick: Icon(
// Icons.arrow_drop_up,
// color: MyColor.darkGreyColor,
// ),
iconSize: 22,
buttonHeight: 44,
buttonPadding:
const EdgeInsets.only(left: 0, right: 12),
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
items: cityList
.map<DropdownMenuItem<OutletCityListModel>>(
(OutletCityListModel option) {
return DropdownMenuItem(
value: option,
child: Text(
option.city.toString(),
style:
textStyleWith12400(MyColor.blackColor),
));
}).toList(),
selectedItemBuilder: (con) {
return cityList.map<Widget>((item) {
return Row(
children: [
Container(
height: 18,
width: 18,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/outline_location_pin.png'),
fit: BoxFit.fill,
)),
),
SizedBox(
width: 4,
),
Expanded(
child: Text(
"${item.city}",
style: textStyleWith12400(
MyColor.blackColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
],
);
}).toList();
},
onChanged: (OutletCityListModel? value) {
print("cities:: " + value.toString());
setState(() {
outletList.clear();
selectedData = null;
outletName = "";
outletAddress = "";
outletList = value!.outletList!;
print("outletList:: " + outletList.length.toString());
});
//Do something when changing the item if you want.
},
),
),
Padding(
padding: const EdgeInsets.only(
top: 12.0, left: 20, right: 20, bottom: 0),
child: DropdownButtonFormField2(
itemSplashColor: MyColor.lightBlueColor,
itemHeight: 36,
itemHighlightColor: MyColor.greyColor2,
dropdownMaxHeight: 200,
dropdownPadding: EdgeInsets.only(left: 2, right: 2),
selectedItemHighlightColor: MyColor.lightBlueColor,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: MyColor.darkGreyColor),
borderRadius: BorderRadius.circular(8.0),
),
isDense: true,
contentPadding: EdgeInsets.zero,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
isExpanded: true,
hint: Row(
children: [
Image.asset(
"assets/current_outlet_icon.png",
height: 14.81,
width: 18,
color: MyColor.greyColor,
),
SizedBox(
width: 4,
),
Expanded(
child: Text(
'Select Outlet',
style: textStyleWith12400(
MyColor.darkGreyColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
icon: const Icon(
Icons.arrow_drop_down,
color: MyColor.darkGreyColor,
),
// iconOnClick: Icon(
// Icons.arrow_drop_up,
// color: MyColor.darkGreyColor,
// ),
iconSize: 22,
buttonHeight: 44,
buttonPadding:
const EdgeInsets.only(left: 0, right: 12),
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
items: outletList
.map<DropdownMenuItem<OutletList>>((option) {
return DropdownMenuItem(
value: option,
child: Text(
option.title.toString(),
style:
textStyleWith12400(MyColor.blackColor),
));
}).toList(),
selectedItemBuilder: (con) {
return outletList.map<Widget>((item) {
return Row(
children: [
Image.asset(
"assets/current_outlet_icon.png",
height: 14.81,
width: 18,
color: MyColor.greyColor,
),
SizedBox(
width: 4,
),
Expanded(
child: Text(
"${item.title}",
style: textStyleWith12400(
MyColor.blackColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
],
);
}).toList();
},
onChanged: (OutletList? value) {
print("outlet" + value!.toJson().toString());
setState(() {
selectedData = [OutletListModel.fromJson(value.toJson())];
outletName = "${value.title}";
outletAddress = "${value.address}";
print("selectedData $selectedData");
});
//Do something when changing the item if you want.
},
),
),
Padding(
padding: const EdgeInsets.only(
top: 21.0, left: 20, right: 20, bottom: 30),
child: Container(
// height: 134,
child: outletAddress == ""
? Container()
: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Outlet Address",
style: textStyleWith16600(
MyColor.blackColor),
),
SizedBox(
height: 16,
),
Container(
padding: const EdgeInsets.only(
top: 15.0,
left: 12,
right: 12,
bottom: 13),
decoration: BoxDecoration(
color: MyColor.whiteColor,
borderRadius:
BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: MyColor.greyColor
.withOpacity(0.3),
blurRadius: 3.0,
),
],
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Padding(
padding:
EdgeInsets.only(top: 2),
child: Image.asset(
"assets/current_outlet_icon.png",
height: 15,
width: 17.30,
color: MyColor.blueColor,
),
),
SizedBox(
width: 8,
),
Expanded(
child: Text(
"$outletName",
style: textStyleWith14500(
MyColor.blackColor),
maxLines: 1,
overflow:
TextOverflow.ellipsis,
),
)
],
),
Text(
"$outletAddress",
style: textStyleWith10400(
MyColor.darkGreyColor),
maxLines: 3,
overflow: TextOverflow.ellipsis,
)
],
),
),
],
),
),
)
],
),
),
DoubleBtnInSingleRow(
cancelOnPressed: () {
Navigator.pop(context);
},
cancelText: "CANCEL",
successText: "SUBMIT",
successOnPressed: () {
print("selectedData $selectedData");
if (selectedData != null) {
BlocProvider.of<OutletCubit>(context)
.emit(OutletCodeSentState(selectedData!));
Navigator.pop(context);
} else {
showToastWithBlackColor(
"Please select your city and outlet.");
}
},
)
],
)),
),
),
);
}
}
谢谢!
看来你错过了 DropdownButtonFormField2 中的
value
参数。
所以试着这样添加
value: selectedData,