I have a dropdown and a textfield, my goal is when i select a value from dropdown and it will called api, the api will return a string value, and the returned value will be displayed in the textfield. Any help and suggestions will be appreciated in advance.
for example:
when I select "CN" value from the dropdown, the IDDD field will be changed to 86
my code:
class VerifyPhone extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// implement createState
return VerifyPhoneState();
}
}
class VerifyPhoneState extends State<VerifyPhone> {
final _formKey = GlobalKey<FormState>();
String _phone = "";
String _code = "";
String? _iddd = '60';
TextEditingController _idddController = TextEditingController();
List<String> countryCode = ['MY', "CN"];
_showOtpDialog() {
var _form = _formKey.currentState as FormState;
if (_form.validate()) {
_form.save();
showOtpDialog(
context,
_phone,
success: (Map<String, String?>? result) {
if (result != null)
Provider.of<RegistLogic>(context, listen: false)
.doUpdateOtpResult(result);
RoutUtil.push(context, SetupPassword());
},
);
}
}
String? _phoneValidation(String? v) {
return [v.isMalaysiaMobileNo()].validate();
}
@override
void initState() {
super.initState();
_code = countryCode[0];
}
@override
void dispose() {
_idddController.dispose();
super.dispose();
}
_getIddd(String countryCode) async {
final response = await AuthService.countryInfo(
countryCode: countryCode,
);
if (response != null) {
_iddd = response['list01'][0]['int_phone_area_code'];
}
print('idd $_iddd');
}
@override
Widget build(BuildContext context) {
// implement build
return Scaffold(
backgroundColor: Colors.white,
body: ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
// _topTitleBar(context),
AuthHeader(options: HeaderOptions("Phone Number")),
_inputView(),
],
),
),
Positioned(
bottom: 18.0,
left: 20,
right: 20,
child: _postBotton(context),
)
],
),
));
}
Widget _inputView() {
return Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 10),
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
'Please enter your phone number to verify your information',
style: TextStyle(color: CustomThemeColor.coolGray)),
),
Column(
children: [
Row(
children: [
Container(
width: 50,
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
labelText: 'Country',
labelStyle: TextStyle(fontSize: 12)),
value: _code,
validator: (v) => [v.isRequired()].validate(),
isDense: true,
onChanged: (val) {
FocusScope.of(context).requestFocus(FocusNode());
_code = val!;
_getIddd(val);
},
items: countryCode.map((item) {
return DropdownMenuItem<String>(
value: item,
child: Text(item),
);
}).toList(),
),
),
SizedBox(
width: 20,
),
Container(
width: 50,
child: TextFormField(
initialValue: _iddd,
enabled: false,
decoration: InputDecoration(
labelText: "IDDD",
),
onChanged: (value) {
setState(() {
_iddd = value;
});
},
onSaved: (val) {
_iddd = val!;
},
autovalidateMode: AutovalidateMode.onUserInteraction,
),
),
SizedBox(
width: 20,
),
Container(
width: 200,
child: TextFormField(
decoration: InputDecoration(
labelText: "Enter your phone number",
),
onSaved: (val) {
_phone = val!;
},
keyboardType: TextInputType.phone,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(11),
],
validator: _phoneValidation,
autovalidateMode: AutovalidateMode.onUserInteraction,
),
)
],
)
],
)
],
),
));
}
Widget _postBotton(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 10),
padding: EdgeInsets.symmetric(vertical: 15),
child: RaisedButton(
padding: EdgeInsets.symmetric(vertical: 10),
onPressed: () {
_showOtpDialog();
},
color: CustomThemeColor.buttonBlue,
child:
Text('NEXT', style: TextStyle(fontSize: 20, color:
Colors.white)),
));
}
}
Thank you
CodePudding user response:
_getIddd(String countryCode) async {
final response = await AuthService.countryInfo(
countryCode: countryCode,
);
if (response != null) {
_iddd = response['list01'][0]['int_phone_area_code'];
_idddController.text = _iddd;
}
print('idd $_iddd');
}