Couldn’t select again when show selected data form api (to select again taglist)
Here is code
`Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(
color: SfColors.primary500,
),
titleSpacing: 0,
title: Text(
‘Stream Setup’,
style: TextStyle(
color: SfColors.primary500,
fontSize: 18,
fontWeight: FontWeight.w700),
),
),
body: MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => updateStreamInfoBloc!,
),
BlocProvider(
create: (context) => getStreamInfoBloc!
..add(GetGetStreamInfos(
loginUserId: loginUserId,
)),
)
],
child: BlocConsumer<GetStreamInfoBloc, GetStreamInfoState>(
builder: (context, state) {
if (state is GetStreamInfoLoading) {
return const Center(
child: CircularProgressIndicator(),
);
} else if (state is GetStreamInfoSuccess) {
//streamInfo = state.allGetStreamInfos;
if (streamInfo != null) {
titleController.text = streamInfo!.title ?? '';
pinMessageController.text = streamInfo!.pinMessage ?? '';
categoryName = streamInfo!.categoryName ?? '';
selectedTagNames =
streamInfo!.tag?.map((tag) => tag.tagName!).toList() ?? [];
selectedTagIds =
streamInfo!.tag!.map((tag) => tag.tagID!).toList();
}
return Container(
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: Column(
// alignment: Alignment.bottomCenter,
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SFTextFieldWidget(
titleText: 'Title',
textAboutMe: false,
hintText: 'Title your Stream',
textEditingController: titleController,
),
const SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 4),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Tag',
style:
Theme.of(context).textTheme.bodyLarge),
BlocConsumer<TagListBloc, TagListState>(
builder: (context, state) {
if (state is TagListLoading) {
return const SizedBox(
child: Center(
child: CircularProgressIndicator()),
);
} else if (state is TagListSuccess) {
tagList = state.allTagLists!.map((item) {
return DropdownMenuItem(
value: item.tagName,
child: Row(
children: [
if (selectedTagNames
.contains(item.tagName))
Icon(Icons.check,
color: SfColors.primary500),
const SizedBox(width: 8),
Text(item.tagName ?? ""),
],
),
);
}).toList();
return Row(
children: [
Expanded(
child:
DropdownButtonFormField<String>(
isExpanded: true,
icon: Icon(
Icons.arrow_drop_down,
color: SfColors.primary500,
),
hint: Text(
selectedTagNames.isEmpty
? 'Tag'.tr()
: selectedTagNames
.join(', '),
style: TextStyle(
color:
SfColors.achromatic700),
),
items: tagList,
onChanged: (item) {
setState(() {
if (selectedTagNames
.contains(item)) {
final index =
selectedTagNames
.indexOf(item!);
selectedTagNames
.remove(item);
selectedTagIds
.removeAt(index);
} else {
final selectedItem = state
.allTagLists!
.firstWhere((tag) =>
tag.tagName ==
item);
selectedTagNames.add(item!);
selectedTagIds
.add(selectedItem.id!);
}
});
},
value: null,
selectedItemBuilder:
(BuildContext context) {
return tagList!.map<Widget>(
(DropdownMenuItem<String>
item) {
return Text(
selectedTagNames.isEmpty
? 'Tag'.tr()
: selectedTagNames
.join(', '),
);
}).toList();
},
),
)
],
);
} else {
return const Center(child: Text(""));
}
},
listener: (context, state) {
if (state is TagListFail) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
content: Text(state.message)));
}
},
),
],
),
),
const SizedBox(
height: 10,
),
SFTextFieldWidget(
titleText: 'Pin Message',
textAboutMe: true,
height: 160,
hintText: 'Pin Message',
textEditingController: pinMessageController,
),
BlocConsumer<UpdateStreamInfoBloc,
UpdateStreamInfoState>(
listener: (context, state) {
if (state is UpdateStreamInfoFailed) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(state.message)));
} else if (state is UpdateStreamInfoSuccess) {
Navigator.pushNamed(
context,
'/live_page',
);
}
},
builder: (context, state) {
if (state is UpdateStreamInfoLoading) {
return Row(
children: [
Expanded(
child: Container(
width: 100,
height: 40,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius:
BorderRadius.circular(10)),
child: Center(
child: CircularProgressIndicator(
color:
Theme.of(context).primaryColor,
),
),
),
)
],
);
} else {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
context
.read<UpdateStreamInfoBloc>()
.add(UpdateStreamInfoIn(
title: titleController.text,
categoryID: categoryId ??
streamInfo?.categoryID ??
0,
userID: loginUserId!,
pinMessage: pinMessageController.text,
tagIds: selectedTagIds,
privacy: '1',
));
},
child: Container(
margin: const EdgeInsets.only(
left: 14.0, right: 14),
width: 100,
height: 40,
decoration: BoxDecoration(
color: SfColors.primary500,
borderRadius:
BorderRadius.circular(10)),
child: const Center(
child: Text(
"Next",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
},
),
]))),
],
),
);
} else {
return const Center(
child: Text("Loading...."),
);
}
},
listener: (context, state) {
if (state is GetStreamInfoFail) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(state.message)));
} else if (state is GetStreamInfoSuccess) {
setState(() {
streamInfo = state.allGetStreamInfos;
});
} else if (state is GetStreamInfoLoading) {}
},
),
//),
),
);
}
}`
I want to multiselect with dropdown in all situation.
First select data and send data to backend. And then need to get that selected data from api and show at UI.Finally edit and update with multiselect.
Need to send update select tag id like [2,3]
dropdown taglist api response was
data : [{ID: 1, tagName: "Ball", description: null, created_at: null, updated_at: null},…] 0 : {ID: 1, tagName: "Tennis", description: null, created_at: null, updated_at: null} ID : 1 created_at : null description : null tagName : "RPG Ball" updated_at : null 1 : {ID: 2, tagName: "PinPIn", description: null, created_at: null, updated_at: null} 2 : {ID: 3, tagName: "MOB", description: null, created_at: null, updated_at: null}
Here is get selected data from api response
`data
:
:
{ID: 22, userID: 22, categoryID: 3, title: “yyy”,…}
ID
:
22
categoryID
:
3
categoryName
:
“Tennis Ball”
created_at
:
“2024-05-15T04:48:12.000Z”
deleted_at
:
null
followerOnlyChat
:
null
pinMessage
:
“pin message”
privacySetting
:
1
s3categoryImage
:
“https://Storage/images.jpeg”
tags
:
[{ID: 329, streaminfoID: 22, tagID: 3, created_at: “2024-06-06T05:39:47.000Z”,…},…]
title
:
“yyy”
updated_at
:
“2024-06-06T05:39:47.000Z”
userID
:
22`