Home > Software engineering >  How to set a value in formTextField
How to set a value in formTextField

Time:02-19

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

enter image description here

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');


}
  • Related