hello I need to use flutter DropdownButton2 to show a small loader in the drop down button when tapped and as soon as an async action which loads the data that should appear in the drop down button, then show the drop down list.
Asked
Active
Viewed 969 times
1
-
Why would you want to show loading indicator inside the dropdown menu? You should load the data when you load the screen and you can show loading indicator instead of the dropdown button while you loading the data. – Ahmed Elsayed Dec 29 '21 at 02:01
-
i actually have a similar use case--when trying to replicate the RecordPicker from Rails Scaffold, which fetches a fresh list from the server every time the dropdown is opened, in order to have the most up-to-date data. In general, yes, loading the data at screen load time is ideal, but in certain cases, exactly this behavior is needed. – Ketzak Jan 31 '23 at 01:39
1 Answers
0
do first api call first
widget.bloc.getFirstDropdownData();
get first drop down api data via Streambuilde or via other way and set Data in dropdown for example
StreamBuilder<Resource<IssueTypeModelList>>(
stream: widget.bloc.issuelogTypeStream,
builder: (BuildContext context, snapshot) {
if (snapshot.data == null ||
snapshot.data?.status ==
ResourceStatus.LOADING) {
return Center(
child: CircularProgressIndicator(),
);
} else if (snapshot.data?.status ==
ResourceStatus.SUCCESS) {
if (snapshot.data!.model!.issueTypeList.length >
0) {
showLoading.sink.add(false);
issueLogTypeList = [
IssueTypeModel(
0,
localizedData.getLocalizedText(
"addissuelog.chooseissuetype"),
"",
0,
false,
"",
"")
];
issueLogTypeList.addAll(List.from(
snapshot.data?.model?.issueTypeList ??
[
IssueTypeModel(
0,
localizedData.getLocalizedText(
"addissuelog.chooseissuetype"),
"",
0,
false,
"",
"")
]));
return Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20),
// padding: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
border: Border.all(
color: AppColors.greyText,
width: 1),
borderRadius:
BorderRadius.circular(5),
shape: BoxShape.rectangle,
),
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, right: 5),
child: DropdownButtonFormField<
IssueTypeModel>(
validator: (value) {
if (value == null ||
value.name.endsWith(
localizedData.getLocalizedText(
"addissuelog.chooseissuetype"),
)) {
return localizedData
.getLocalizedText(
"addissuelog.chooseissuetype");
}
},
style: TextStyle(
color: AppColors.black,
fontSize:
AppFontSize.largeTextSize),
decoration: InputDecoration(
enabledBorder:
InputBorder.none),
icon: Icon(Icons
.keyboard_arrow_down_sharp),
items: issueLogTypeList
.map(
(value) => DropdownMenuItem(
child: new SizedBox(
width: 200.0,
child: new Text(
value.name
.toString(),
overflow:
TextOverflow
.ellipsis,
)),
value: value,
))
.toList(),
onChanged: (val) {
print('value name == ' +
val!.name.toString());
print('value id == ' +
val.id.toString());
issuelogtype = val.id;
if (!val.name.toString().contains(
localizedData.getLocalizedText(
"addissuelog.chooseissuetype"))) {
/*
showAnimatedNavigation(context,
AppProgressDialog());
*/
widget.bloc.fetchIssueList(
val.id.toString());
}
},
isExpanded: true,
value: getTypeModel(issuelogtype),
key: GlobalKey(),
),
),
),
Positioned(
left: 10,
top: 12,
child: Container(
padding: EdgeInsets.only(
bottom: 10,
left: 10,
right: 10),
color: Colors.white,
child: Text(
localizedData.getLocalizedText(
"addissuelog.chooseissuetype"),
style: TextStyle(
color: AppColors.textColor,
fontSize: 12),
),
)),
],
);
} else {
showLoading.sink.add(false);
return Center(
child: Text("No issue Log data found"),
);
}
}
return Text('');
},
);
do second api call on Onchange() method for every value change. do api call as like as first api call
onChanged: (val) {
issuelogtype = val.id;
if (!val.name.toString().contains(
localizedData.getLocalizedText(
"addissuelog.chooseissuetype"))) {
//show loader in here
widget.bloc.fetchSecondDropdownData(val.id.toString());
}
},
get data and set Data in dropdown as like as first dropdown use another StreamBuilder, Dropdownwidget & same procedure thats all.
Babul
- 1,076
- 7
- 9