Flutter国际电话号码输入插件country_code_text_field的使用

当然，下面是一个关于如何使用 country_code_text_field 插件的 Flutter 代码示例。这个插件允许用户在输入电话号码时选择国家代码，非常适合国际化应用。

首先，确保你已经在 pubspec.yaml 文件中添加了 country_code_picker 和 intl_phone_number_input 依赖项（注意：country_code_text_field 可能不是一个确切的包名，但 intl_phone_number_input 提供类似功能）。

dependencies:
  flutter:
    sdk: flutter
  intl_phone_number_input: ^0.7.0+2  # 请检查最新版本

然后，运行 flutter pub get 来获取依赖项。

接下来，在你的 Dart 文件中使用 IntlPhoneNumberInput 小部件。下面是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';
import 'package:intl_phone_number_input/utility/phone_number_util.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phone Number Input Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: MyPhoneNumberForm(),
          ),
        ),
      ),
    );
  }
}

class MyPhoneNumberForm extends StatefulWidget {
  @override
  _MyPhoneNumberFormState createState() => _MyPhoneNumberFormState();
}

class _MyPhoneNumberFormState extends State<MyPhoneNumberForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  PhoneNumber number = PhoneNumber();
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IntlPhoneNumberInput(
            onInputChanged: (PhoneNumber number) {
              setState(() {
                this.number = number;
              });
            },
            onInputValidated: (bool value) {
              print("Is input valid? $value");
            },
            initialSelection: "US",
            favorite: ['+1', 'US'],
            selectorConfig: SelectorConfig(
              selectorType: PhoneInputSelectorType.DIALOG,
            ),
            textFieldController: _controller,
            ignoreBlank: false,
            autoValidateMode: AutovalidateMode.disabled,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Phone Number',
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                _formKey.currentState!.save();
                print("Complete number: ${number.completeNumber}");
                print("International number: ${number.internationalNumber}");
                print("E164 format: ${number.e164}");
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

1. IntlPhoneNumberInput 小部件用于输入和选择电话号码。
2. onInputChanged 回调用于在用户输入电话号码时更新状态。
3. initialSelection 用于设置初始选择的国家代码。
4. selectorConfig 允许你配置选择器类型，这里使用对话框选择器。
5. textFieldController 用于控制文本框。
6. 表单验证部分确保在提交之前验证电话号码。

这个示例展示了如何使用 intl_phone_number_input 插件来实现国际电话号码输入功能。请根据你的具体需求调整代码。