I am using flutter Autocomplete widget with an api. Expected behaviour is that whenever user types something I want to trigger an api call which in response gives me a list of option objects and show those options as a list. But what is happening here is the api call is not triggered. I've tried debugging this issue, and saw that optionsBuilder is not triggered and I'm still unable to resolve it. Is there something I'm missing? Any guidance would be appreciated. Here is my code:
Autocomplete<PolicyDetails>(
fieldViewBuilder:
(context, controller, focusNode, onFieldSubmitted) {
return TextFormField(
cursorColor: Theme.of(context).secondaryHeaderColor,
decoration: InputDecoration(
filled: true,
fillColor:
Theme.of(context).inputDecorationTheme.fillColor,
label: isEmpty
? Row(
children: [
Text(
// getTranslated(context, "policy_name"),
'Policy name ytesttt',
style: TextStyle(
fontFamily:
FontFamilyConstants.Santoshi,
fontSize: FontConstants.fontsize18,
fontWeight: FontWeight.w500,
color: ColorConstants.greyCommonColor),
),
const Text(
' *',
style: TextStyle(
fontFamily:
FontFamilyConstants.Santoshi,
fontSize: FontConstants.fontsize18,
fontWeight: FontWeight.w500,
color: Colors.red),
),
],
)
: null,
labelStyle: TextStyle(
fontFamily: FontFamilyConstants.Santoshi,
fontSize: FontConstants.fontsize18,
fontWeight: FontWeight.w500,
color: ColorConstants.greyCommonColor),
suffixStyle: const TextStyle(color: Colors.red),
contentPadding: isEmpty
? const EdgeInsets.only(
top: 6, bottom: 6, right: 40, left: 16)
: const EdgeInsets.only(
left: 16,
top: 20,
bottom: 6.0,
),
border: const UnderlineInputBorder(
borderSide: BorderSide(style: BorderStyle.none),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
enabledBorder: const UnderlineInputBorder(
borderSide: BorderSide(style: BorderStyle.none),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.onTertiary,
width: 1.5),
),
),
controller: policyNameController,
);
},
optionsBuilder: (TextEditingValue textEditingValue) async {
if (textEditingValue.text.length < 2) {
return const Iterable<PolicyDetails>.empty();
}
return await getPolicyNameList(textEditingValue.text);
},
// displayStringForOption: (PolicyDetails option) =>
// option.policyName,
onSelected: (PolicyDetails suggestion) {
setState(() {
policyNameController.text =
suggestion.policyName.toString();
selectedPolicyId = suggestion.id;
isSearchLoading = false;
selectedSubType = suggestion.insuranceSubTypeId;
//print(suggestion.policyName.toString());
//print(selectedPolicyId);
});
},
optionsViewBuilder: (context, onSelected, options) {
return ListView.builder(
itemCount: options.length,
shrinkWrap: false,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: const EdgeInsets.all(12.0),
width: double.infinity,
child: Text(
options.elementAt(index).policyName.toString(),
style: const TextStyle(
fontWeight: FontWeight.w500,
),
),
);
},
);
},
),
class PolicyDetails {
final int id;
final String policyName;
final int insuranceSubTypeId;
PolicyDetails(
{required this.id,
required this.policyName,
required this.insuranceSubTypeId});
}
getPolicyNameList(value) async {
isSearchLoading = true;
policyData = [];
if (value != '') {
var obj = {
'policyName': value,
'insuranceSubTypeId': 0,
};
final response = await customerService.getPolicyNameList(obj);
try {
if (response != null) {
var temp;
temp = (response['policyDetails']);
policyData = response['policyDetails'];
List<PolicyDetails> users = [];
for (var u in temp) {
PolicyDetails user = PolicyDetails(
id: u['id'],
policyName: u['policyName'],
insuranceSubTypeId: u['insuranceSubTypeId']);
users.add(user);
}
print(['ussersssssss', users]);
return users;
}
} catch (e) {
print(e);
}
} else {
return [];
}
}
I am using flutter Autocomplete widget with an api. Expected behaviour is that whenever user types something I want to trigger an api call which in response gives me a list of option objects and show those options as a list. But what is happening here is the api call is not triggered. I've tried debugging this issue, and saw that optionsBuilder is not triggered and I'm still unable to resolve it. Is there something I'm missing? Any guidance would be appreciated. Here is my code:
Autocomplete<PolicyDetails>(
fieldViewBuilder:
(context, controller, focusNode, onFieldSubmitted) {
return TextFormField(
cursorColor: Theme.of(context).secondaryHeaderColor,
decoration: InputDecoration(
filled: true,
fillColor:
Theme.of(context).inputDecorationTheme.fillColor,
label: isEmpty
? Row(
children: [
Text(
// getTranslated(context, "policy_name"),
'Policy name ytesttt',
style: TextStyle(
fontFamily:
FontFamilyConstants.Santoshi,
fontSize: FontConstants.fontsize18,
fontWeight: FontWeight.w500,
color: ColorConstants.greyCommonColor),
),
const Text(
' *',
style: TextStyle(
fontFamily:
FontFamilyConstants.Santoshi,
fontSize: FontConstants.fontsize18,
fontWeight: FontWeight.w500,
color: Colors.red),
),
],
)
: null,
labelStyle: TextStyle(
fontFamily: FontFamilyConstants.Santoshi,
fontSize: FontConstants.fontsize18,
fontWeight: FontWeight.w500,
color: ColorConstants.greyCommonColor),
suffixStyle: const TextStyle(color: Colors.red),
contentPadding: isEmpty
? const EdgeInsets.only(
top: 6, bottom: 6, right: 40, left: 16)
: const EdgeInsets.only(
left: 16,
top: 20,
bottom: 6.0,
),
border: const UnderlineInputBorder(
borderSide: BorderSide(style: BorderStyle.none),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
enabledBorder: const UnderlineInputBorder(
borderSide: BorderSide(style: BorderStyle.none),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.onTertiary,
width: 1.5),
),
),
controller: policyNameController,
);
},
optionsBuilder: (TextEditingValue textEditingValue) async {
if (textEditingValue.text.length < 2) {
return const Iterable<PolicyDetails>.empty();
}
return await getPolicyNameList(textEditingValue.text);
},
// displayStringForOption: (PolicyDetails option) =>
// option.policyName,
onSelected: (PolicyDetails suggestion) {
setState(() {
policyNameController.text =
suggestion.policyName.toString();
selectedPolicyId = suggestion.id;
isSearchLoading = false;
selectedSubType = suggestion.insuranceSubTypeId;
//print(suggestion.policyName.toString());
//print(selectedPolicyId);
});
},
optionsViewBuilder: (context, onSelected, options) {
return ListView.builder(
itemCount: options.length,
shrinkWrap: false,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: const EdgeInsets.all(12.0),
width: double.infinity,
child: Text(
options.elementAt(index).policyName.toString(),
style: const TextStyle(
fontWeight: FontWeight.w500,
),
),
);
},
);
},
),
class PolicyDetails {
final int id;
final String policyName;
final int insuranceSubTypeId;
PolicyDetails(
{required this.id,
required this.policyName,
required this.insuranceSubTypeId});
}
getPolicyNameList(value) async {
isSearchLoading = true;
policyData = [];
if (value != '') {
var obj = {
'policyName': value,
'insuranceSubTypeId': 0,
};
final response = await customerService.getPolicyNameList(obj);
try {
if (response != null) {
var temp;
temp = (response['policyDetails']);
policyData = response['policyDetails'];
List<PolicyDetails> users = [];
for (var u in temp) {
PolicyDetails user = PolicyDetails(
id: u['id'],
policyName: u['policyName'],
insuranceSubTypeId: u['insuranceSubTypeId']);
users.add(user);
}
print(['ussersssssss', users]);
return users;
}
} catch (e) {
print(e);
}
} else {
return [];
}
}
1 Answer
Reset to default 1Your TextFormField should use the controller from the fieldViewBuilder and not the policyNameController