Flutter国家选择器插件easy_country_picker的使用

特性

• 当用户在文本框中开始输入国家名称时，会根据用户输入的内容建议相应的国家名称。
• 用户可以从建议列表中选择一个国家。
• 这将返回一个包含以下信息的Country对象：
  • 国家代码，
  • 国家名称，
  • 货币代码，
  • 电话区号，
  • 大洲名称。

开始使用

安装该插件并开始使用。

使用方法

这个插件可以在注册表单中使用，以获取用户的国家信息。用户无需手动输入电话区号或货币代码，你可以在用户选择国家后自动填充这些信息。

示例代码

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Country? country;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            // 用于选择国家的字段
            SizedBox(
              width: 400,
              child: CountrySelectionField(
                onCountrySelect: (val) {
                  setState(() {
                    country = val;
                  });
                },
                inputDecoration: InputDecoration(
                  prefixIcon: const Icon(Icons.public),
                  hintText: 'Select Country',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  filled: true,
                  fillColor: Colors.grey[200],
                ),
              ),
            ),
            const SizedBox(height: 20),
            // 显示所选国家的详细信息
            SizedBox(
              width: 400,
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text("Selected Country Details"),
                      Text("Country Code: ${country?.countryCode}"),
                      Text("Country Name: ${country?.countryName}"),
                      Text("Phone Code: ${country?.phoneNumberPrefix}"),
                      Text("Continent: ${country?.continentName}"),
                      Text("Currency: ${country?.currencyCode}"),
                    ],
                  ),
                ),
              ),
            ),
            const SizedBox(height: 10),
            // 按钮用于显示模态底部选择器
            ElevatedButton(
              onPressed: () async {
                await CountryPicker.selectCountry(
                  context,
                ).then((value) {
                  if (value != null) {
                    setState(() {
                      country = value;
                    });
                  }
                });
              },
              child: const Text("Select Country"),
            ),
          ],
        ),
      ),
    );
  }
}

效果图

配置模态底部选择器

你可以通过以下参数配置模态底部选择器：

• double? height,
• ShapeBorder shape = const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
• Color? backgroundColor,
• double contentpadding = 10,
• bool showCloseButton = false,

附加信息

Country 类

Country 类包含了国家的相关信息。

class Country {
  String? countryCode;
  String? countryName;
  String? currencyCode;
  String? phoneNumberPrefix;
  String? continentName;

  Country({
    this.countryCode,
    this.countryName,
    this.currencyCode,
    this.phoneNumberPrefix,
    this.continentName,
  });

  factory Country.fromMap(Map<String, dynamic> map) {
    return Country(
      countryCode: map['countryCode'],
      countryName: map['countryName'],
      currencyCode: map['currencyCode'],
      phoneNumberPrefix: map['phoneNumberPrefix'],
      continentName: map['continentName'],
    );
  }
}

国家列表

一个包含所有国家数据的列表。

List<Map<String, String>> countryList = [
  {
    "countryCode": "AD",
    "countryName": "安道尔",
    "currencyCode": "EUR",
    "phoneNumberPrefix": "+376",
    "continentName": "欧洲"
  },
  {
    "countryCode": "AE",
    "countryName": "阿拉伯联合酋长国",
    "currencyCode": "AED",
    "phoneNumberPrefix": "+971",
    "continentName": "亚洲"
  },
  {
    "countryCode": "AF",
    "countryName": "阿富汗",
    "currencyCode": "AFN",
    "phoneNumberPrefix": "+93",
    "continentName": "亚洲"
  },
  // 所有国家数据...
];

CountrySelectionField 类

这个类有两个参数：

• final Function(Country?)? onCountrySelect;：用户选择国家时返回的Country对象。
• final InputDecoration inputDecoration;：用于更新文本框的外观。

文本框大小

文本框没有特定的大小，可以将其包裹在SizedBox中以设置所需的大小。

body: SizedBox(
  width: 100,
  child: CountrySelectionField(),
),