Flutter如何实现国家地区选择器

在Flutter项目中需要实现一个国家和地区的选择器，要求支持搜索和分级显示（先选国家再选地区）。目前尝试过使用country_pickers插件，但无法满足自定义UI和二级地区选择的需求。请问有哪些推荐的方案或插件可以实现这个功能？最好能提供代码示例或实现思路，特别是如何处理大量国家地区数据的加载性能问题。

itying888 1楼

在Flutter中实现国家地区选择器，主要有以下几种方式：

使用第三方库（推荐）
- country_pickers：专门处理国家选择，支持搜索和自定义样式
- flutter_country_code_picker：轻量级国家代码选择器
- intl_phone_number_input：带电话号码输入的国家选择

自定义实现

// 1. 准备国家数据（JSON格式）
// 2. 使用SearchDelegate或showSearch实现搜索
// 3. ListView.builder展示列表
// 4. 添加国旗图标（可使用flag库）

简单示例代码：

List<Country> countries = [...]; // 国家数据
Country selectedCountry;

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    content: ListView.builder(
      itemCount: countries.length,
      itemBuilder: (ctx, index) => ListTile(
        leading: Image.asset(countries[index].flag),
        title: Text(countries[index].name),
        onTap: () {
          setState(() => selectedCountry = countries[index]);
          Navigator.pop(context);
        },
      ),
    ),
  ),
);

建议：直接使用现成库更高效，若需要特殊定制再考虑自实现。记得在pubspec.yaml添加依赖。

更多关于Flutter如何实现国家地区选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 2楼

在Flutter中实现国家地区选择器，主要有以下几种方式：

1. 使用第三方库（推荐）

country_picker 库

dependencies:
  country_picker: ^2.0.0

import 'package:country_picker/country_picker.dart';

// 显示国家选择器
showCountryPicker(
  context: context,
  showPhoneCode: true,
  onSelect: (Country country) {
    print('选择的国家: ${country.name}');
    print('国家代码: ${country.countryCode}');
    print('电话区号: ${country.phoneCode}');
  },
);

2. 自定义实现

基础版本

class CountryPicker extends StatefulWidget {
  @override
  _CountryPickerState createState() => _CountryPickerState();
}

class _CountryPickerState extends State<CountryPicker> {
  List<Map<String, String>> countries = [
    {'name': '中国', 'code': 'CN', 'dialCode': '+86'},
    {'name': '美国', 'code': 'US', 'dialCode': '+1'},
    {'name': '英国', 'code': 'GB', 'dialCode': '+44'},
    // 添加更多国家...
  ];
  
  String? selectedCountry;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: selectedCountry,
      hint: Text('选择国家'),
      items: countries.map((country) {
        return DropdownMenuItem<String>(
          value: country['code'],
          child: Row(
            children: [
              Text(country['name']!),
              SizedBox(width: 8),
              Text(country['dialCode']!),
            ],
          ),
        );
      }).toList(),
      onChanged: (value) {
        setState(() {
          selectedCountry = value;
        });
      },
    );
  }
}

带搜索功能的高级版本

void showCustomCountryPicker(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return StatefulBuilder(
        builder: (context, setState) {
          return Column(
            children: [
              Padding(
                padding: EdgeInsets.all(16),
                child: TextField(
                  decoration: InputDecoration(
                    hintText: '搜索国家...',
                    prefixIcon: Icon(Icons.search),
                  ),
                  onChanged: (value) {
                    // 实现搜索逻辑
                  },
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: countries.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      leading: Text(countries[index]['code']!),
                      title: Text(countries[index]['name']!),
                      subtitle: Text(countries[index]['dialCode']!),
                      onTap: () {
                        Navigator.pop(context, countries[index]);
                      },
                    );
                  },
                ),
              ),
            ],
          );
        },
      );
    },
  );
}

3. 集成国旗图标

使用 flag 包显示国旗：

dependencies:
  flag: ^2.0.0

import 'package:flag/flag.dart';

Flag.fromString(
  countryCode,
  height: 24,
  width: 36,
)