How to add textfield value based on drop down item is selected in flutter

Question

here when I am select the value from drop down the country code text field value is changed based on drop-down item is selected, in this example I have some static value when I am selecting the USA from drop-down value the country code value is automatically changed +1 and when I am selecting India from drop-down the country code will be changed +91.

Here is the image of output so you get an better idea.

Here is code i've tried.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:flutter_masked_text/flutter_masked_text.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'package:tudo/src/modules/signup/index.dart';

import 'package:tudo/src/utils/app_constants_value.dart';
import 'package:tudo/src/utils/roundrectbutton.dart';

class SignupScreen extends StatefulWidget {
  const SignupScreen({
    Key key,
    @required SignupBloc signupBloc,
  })  : _signupBloc = signupBloc,
        super(key: key);

  final SignupBloc _signupBloc;

  @override
  SignupScreenState createState() {
    return new SignupScreenState(_signupBloc);
  }
}

class SignupScreenState extends State<SignupScreen> {
  final SignupBloc _signupBloc;
  SignupScreenState(this._signupBloc);

  static final List<String> _dropdownItems = <String>['India', 'USA'];
  final formKey = new GlobalKey<FormState>();
  bool _validate = false;

  Person person = new Person();
  var controller = new MaskedTextController(mask: '(000) 000 0000');
  String _dropdownValue = 'India';
  String _countryCode = '+91';
  String _errorText;

  @override
  void initState() {
    super.initState();
    this._signupBloc.dispatch(LoadSignupEvent());
  }

  @override
  void dispose() {
    super.dispose();
  }

  Widget _buildCountry() {
    return FormField(
      builder: (FormFieldState state) {
        return DropdownButtonHideUnderline(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new InputDecorator(
                decoration: InputDecoration(
                  filled: false,
                  hintText: 'Choose Country',
                  prefixIcon: Icon(Icons.location_on),
                  labelText:
                      _dropdownValue == null ? 'Where are you from' : 'From',
                  errorText: _errorText,
                ),
                isEmpty: _dropdownValue == null,
                child: new DropdownButton<String>(
                  value: _dropdownValue,
                  isDense: true,
                  onChanged: (String newValue) {
                    print('value change');
                    print(newValue);
                    person.country = newValue;
                    if (newValue == 'India') {
                      person.countryCode = '+91';
                    } else if (newValue == 'USA') {
                      person.countryCode = '+1';
                    } else {
                      person.countryCode = '+1';
                    }
                    setState(() {
                      _countryCode = person.countryCode;
                      _dropdownValue = person.country;
                    });
                    print('person.countryCode');
                    print('${person.countryCode}');
                  },
                  items: _dropdownItems.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildPhonefiled() {
    return Row(
      children: <Widget>[
        new Expanded(
          child: new TextFormField(
            initialValue: _countryCode,
            enabled: false,
            decoration: InputDecoration(
              filled: false,
              prefixIcon: Icon(FontAwesomeIcons.globe),
              labelText: AppConstantsValue.appConst['signup']['code']
                  ['translation'],
              hintText: "Country code",
            ),
            // onSaved: (String value) {
            //   setState(() {
            //     _countryCode = person.countryCode;
            //   });
            // },
          ),
          flex: 2,
        ),
        new SizedBox(
          width: 10.0,
        ),
        new Expanded(
          child: new TextFormField(
            controller: controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              filled: false,
              labelText: AppConstantsValue.appConst['signup']['mobile']
                  ['translation'],
              hintText: "Mobile number",
              prefixIcon: new Icon(Icons.mobile_screen_share),
            ),
            onSaved: (String value) {
              person.phoneNumber = value;
            },
          ),
          flex: 5,
        ),
      ],
    );
  }

  Widget _buildSignupButton(BuildContext context) {
    return GestureDetector(
      child: RoundrectButton.buildRoundedRectButton(
          AppConstantsValue.appConst['signup']['signup']['translation'],
          signUpGradients,
          false),
      onTap: () {
        //  _submit();
        final FormState form = formKey.currentState;
        form.save();
        if (form.validate() && person.termsAndCondition) {
          Map<String, dynamic> signupdata = {
            'countyCode': person.countryCode,
            'phoneNumber': person.phoneNumber,
          };
        } else {
          setState(() {
            _validate = true;
          });
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      bottom: false,
      child: Form(
        key: formKey,
        autovalidate: _validate,
        child: Scrollbar(
          child: SingleChildScrollView(
            dragStartBehavior: DragStartBehavior.down,
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: new Container(
              margin: EdgeInsets.fromLTRB(30, 100, 30, 0),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  _buildCountry(),
                  _buildPhonefiled(),
                  SizedBox(
                    height: 20.0,
                  ),
                  _buildSignupButton(context),

                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Person {
  String email = '';
  String country = '';
  String countryCode = '';
  String phoneNumber = '';
  String firstname = '';
  String lastname = '';
  String password = '';
  bool termsAndCondition = false;
}

Kailash Chouhan Kailash Chouhan · Accepted Answer · 2019-09-10T09:27:40

You can easily achieve this using List of Object, please check below code

import 'package:flutter/material.dart';
import 'package:flutter_masked_text/flutter_masked_text.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
//  static final List<String> _dropdownItems = <String>['India', 'USA'];
  static List<CountryModel> _dropdownItems = new List();
  final formKey = new GlobalKey<FormState>();

  var controller = new MaskedTextController(mask: '(000) 000 0000');
  CountryModel _dropdownValue;
  String _errorText;
  TextEditingController phoneController = new TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      _dropdownItems.add(CountryModel(country: 'India', countryCode: '+91'));
      _dropdownItems.add(CountryModel(country: 'USA', countryCode: '+1'));
      _dropdownValue = _dropdownItems[0];
      phoneController.text = _dropdownValue.countryCode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text('Demo'),
  ),
  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _buildCountry(),
        _buildPhonefiled(),
      ],
    ),
  ),
);
  }

  Widget _buildCountry() {
return FormField(
  builder: (FormFieldState state) {
    return DropdownButtonHideUnderline(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new InputDecorator(
            decoration: InputDecoration(
              filled: false,
              hintText: 'Choose Country',
              prefixIcon: Icon(Icons.location_on),
              labelText:
                  _dropdownValue == null ? 'Where are you from' : 'From',
              errorText: _errorText,
            ),
            isEmpty: _dropdownValue == null,
            child: new DropdownButton<CountryModel>(
              value: _dropdownValue,
              isDense: true,
              onChanged: (CountryModel newValue) {
                print('value change');
                print(newValue);
                setState(() {
                  _dropdownValue = newValue;
                  phoneController.text = _dropdownValue.countryCode;
                });
              },
              items: _dropdownItems.map((CountryModel value) {
                return DropdownMenuItem<CountryModel>(
                  value: value,
                  child: Text(value.country),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  },
);
  }

  Widget _buildPhonefiled() {
return Row(
  children: <Widget>[
    new Expanded(
      child: new TextFormField(
        controller: phoneController,
        enabled: false,
        decoration: InputDecoration(
          filled: false,
          prefixIcon: Icon(FontAwesomeIcons.globe),
          labelText: 'code',
          hintText: "Country code",
        ),
      ),
      flex: 2,
    ),
    new SizedBox(
      width: 10.0,
    ),
    new Expanded(
      child: new TextFormField(
        controller: controller,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          filled: false,
          labelText: 'mobile',
          hintText: "Mobile number",
          prefixIcon: new Icon(Icons.mobile_screen_share),
        ),
        onSaved: (String value) {},
      ),
      flex: 5,
    ),
  ],
);
  }
}

class CountryModel {
  String country = '';
  String countryCode = '';

  CountryModel({
    this.country,
    this.countryCode,
  });
}

How to add textfield value based on drop down item is selected in flutter

1 Answers