How to add textfield value based on drop down item is selected in flutter
14,463
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,
});
}
Related videos on Youtube
Comments
-
Rutvik Gumasana almost 2 years
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; }