Flutter国家电话代码选择器插件country_phone_code_picker的使用

Flutter国家电话代码选择器插件country_phone_code_picker的使用

特性

该插件提供了许多自定义参数，可以轻松地构建符合你需求的国家电话代码选择器！

国家电话代码选择器 (CountryPhoneCodePicker) 参数

特定详细小部件参数

开始使用

在你的 pubspec.yaml 文件中添加此依赖项：

  country_phone_code_picker: <VERSION>

或者在终端运行以下命令：

  flutter pub add country_phone_code_picker

使用方法

在使用国家代码选择器之前，需要初始化 CountryController。使用以下函数来初始化 CountryController：

initializeCountryController();

确保在使用小部件之前已经初始化了 CountryController。一个安全的地方是在 MaterialApp 之外初始化它！

你可以通过以下方式获取 CountryController 的实例：

CountryController countryController = getCountryController();

创建默认选中的国家选择器

CountryPhoneCodePicker.withDefaultSelectedCountry(
  countryController: countryController,
  defaultCountryCode:
  Country(name: 'India', countryCode: 'IN', phoneCode: '+91'),
  borderRadius: 5,
  borderWidth: 1,
  borderColor: Colors.grey,
  style: const TextStyle(fontSize: 16),
  searchBarHintText: 'Search by name',
),

显示特定属性

例如，显示国家代码、电话代码、名称、旗帜：

CountryPhoneCodeWidget(
  height: 30,
  width: 50,
  textStyle: const TextStyle(fontSize: 15),
  borderWidth: 1,
  borderRadius: 5,
  borderColor: Colors.black,
),

获取所选国家信息

CountryController countryController = getCountryController(); // 获取控制器实例
print(countryController.selectedCountry); // 打印所选国家
print(countryController.selectedCountryCode); // 打印所选国家代码

完整示例代码

以下是一个完整的示例代码，展示了如何使用 country_phone_code_picker 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化国家控制器
    initializeCountryController();
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取国家控制器实例
    CountryController countryController = getCountryController();
    return Scaffold(
      appBar: AppBar(
        title: const Text('国家电话代码选择器'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CountryPhoneCodePicker.withDefaultSelectedCountry(
                countryController: countryController,
                defaultCountryCode:
                    Country(name: 'India', countryCode: 'IN', phoneCode: '+91'),
                borderRadius: 5,
                borderWidth: 1,
                flagBorderRadius: 5,
                flagHeight: 20,
                flagWidth: 30,
                borderColor: Colors.grey,
                style: const TextStyle(fontSize: 16),
                searchBarHintText: '搜索国家名称',
              ),
              const SizedBox(height: 10),
              CountryFlagWidget(
                height: 30,
                width: 50,
                borderStyle: BorderStyle.none,
              ),
              const SizedBox(height: 10),
              CountryNameWidget(
                height: 30,
                width: 50,
                borderStyle: BorderStyle.none,
                textStyle: const TextStyle(fontSize: 15),
              ),
              const SizedBox(height: 10),
              CountryCodeWidget(
                height: 30,
                width: 50,
                textStyle:
                    const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              CountryPhoneCodeWidget(
                height: 30,
                width: 50,
                textStyle: const TextStyle(fontSize: 15),
                borderWidth: 1,
                borderRadius: 5,
                borderColor: Colors.black,
              ),
              const SizedBox(height: 10),
              // 访问国家控制器的值
              Text(countryController.selectedCountryCode)
            ],
          ),
        ),
      ),
    );
  }
}