如何在 flutter 中将国家/地区拨号代码添加到 TextEditingController

Question

我在我的 TextFormField 中使用了 flutter 包 country_code_picker，我实现了在用户 select 所在国家/地区之后将用户所在国家/地区的拨号代码放入我的 phone TextEditingController 文本中。因此，如果例如在塞内加尔用户输入 7712345678，我将在我的 TextEditing 控制器文本中得到 +2217712345678。在此先感谢您的帮助。

这是我的代码

TextEditingController phoneController = new TextEditingController(text: "");


 Widget _phoneContainer() {
  return new Container(
    child: new TextFormField(
        controller: phoneController,
        decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(vertical: 2),
            prefixIcon: CountryCodePicker(
              // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
              initialSelection: '+221',
              favorite: ['+221', 'SN'],
              textStyle: TextStyle(color: Colors.orange[900]),
              showFlag: true,

               //showFlagDialog: true,
              //comparator: (a, b) => b.name.compareTo(a.name),
              //Get the country information relevant to the initial selection
              //onInit: (code) => print("${code.name} ${code.dialCode}"),
            ),


            labelText: Texts.PHONE_NUMBER_LOGIN,
            focusColor: Colors.orange[900],
            labelStyle: TextStyle(fontSize: 15.0, color: Colors.orange[900]),
            /* hintStyle: TextStyle(
              color: Colors.orange[900]
              ) */
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              borderSide: const BorderSide(color: Colors.white)
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(20.0)),
                borderSide: const BorderSide(color: Colors.white)
              ),
            hasFloatingPlaceholder: false

            ),
        keyboardType: TextInputType.phone,
        style:TextStyle(
              color: Colors.orange[900],
              decorationColor: Colors.white,
          ),

        ),
    margin: EdgeInsets.only(bottom: 20.0, left: 40.0, right: 40.0),
    color: Colors.white,
    height: 40.0,
    );
  }

Answer 1

运行这个代码。在 Check Button 上，它将在控制台

上打印您的整个 phone 号码（拨号代码 + 在文本字段中输入的 phone 号码）

import 'package:flutter/material.dart';
import 'package:country_code_picker/country_code_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  TextEditingController phoneController = new TextEditingController();
  String phoneNumber = "";

  void _onCountryChange(CountryCode countryCode) {  
    this.phoneNumber =  countryCode.toString();
    print("New Country selected: " + countryCode.toString());
  }

  void check(){
    print("Full Text: "+ this.phoneNumber + phoneController.text);
  }

  @override
  Widget build(BuildContext context) {

    final phone = new TextFormField(
      controller: phoneController,
      keyboardType: TextInputType.phone,
      autofocus: false,
      style: new TextStyle(fontSize:14.0,
        color: Colors.black,
        fontWeight: FontWeight.w400,),
    );

    final checkBtn = RaisedButton(key: null, onPressed: check,
        color:  Colors.blue,
        child:  new Text("Check")
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Country Code Demo'),
        ),
        body: Center(
        child: new ListView(
          shrinkWrap: true,
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          children: <Widget>[
              CountryCodePicker(
                onChanged: _onCountryChange,
                // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
                initialSelection: 'IT',
                favorite: ['+39','FR'],
                // optional. Shows only country name and flag
                showCountryOnly: false,
                // optional. Shows only country name and flag when popup is closed.
                showOnlyCountryWhenClosed: false,
                // optional. aligns the flag and the Text left
                alignLeft: false,
              ),
              SizedBox(height: 16.0),
              phone,
              SizedBox(height: 16.0),
              checkBtn
            ]
          ),
        ),
      )
    );
  }
}

如何在 flutter 中将国家/地区拨号代码添加到 TextEditingController

How to add country dial code to TextEditingController in flutter

dart

dart-pub

flutter

flutter-dependencies

flutter-layout