如何在颤动中选择基于下拉项添加文本字段值

Posted 2023-02-23

【中文标题】如何在颤动中选择基于下拉项添加文本字段值

【英文标题】：How to add textfield value based on drop down item is selected in flutter

【发布时间】：2020-01-08 22:57:13

【问题描述】：

在这里，当我从下拉列表中选择值时，国家代码文本字段的值会根据选择的下拉项而更改，在此示例中，当我从下拉值中选择 USA 时，我有一些静态值国家代码值会自动更改为 +1，当我从下拉列表中选择印度时，国家代码值将更改为 +91。

这是输出的图像，以便您更好地了解。

这是我尝试过的代码。

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: '[phone]');
  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;

【参考方案1】：

您可以使用对象列表轻松实现此目的，请查看以下代码

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: '[phone]');
  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,
  );