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

简介

eo_country_picker 是一个用于 Flutter 的插件，允许用户选择国家并获取其名称、国旗、ISO 代码和拨号代码。此插件非常适合需要用户输入或选择国家的应用程序，例如电话号码输入字段。

特性

• 获取国家名称、国旗表情符号、ISO 代码和拨号代码。
• 简单易用的 API。
• 支持国家选择和检索。

安装

在 pubspec.yaml 文件中添加以下依赖项：

flutter pub add eo_country_picker

导入

在 Dart 文件中导入插件：

import 'package:eo_country_picker/eo_country_picker.dart';

使用示例：

FilledButton(
    onPressed: () async {
    final result = await CountryPicker.open(context: context);
    if (result != null) {
        setState(() {
        _selectedCountry = result;
        });
    }
    },
    child: const Text("Pick a Country"),
),

截图

所有国家

搜索结果

选择的国家

示例代码

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Example(),
    );
  }
}

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  Country? _selectedCountry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 显示选中的国家信息
            if (_selectedCountry != null)
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(_selectedCountry.toString()),
              ),
            // 按钮用于打开国家选择器
            FilledButton(
              onPressed: () async {
                final result = await CountryPicker.open(context: context);
                if (result != null) {
                  setState(() {
                    _selectedCountry = result;
                  });
                }
              },
              child: const Text("Pick a Country"),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

1. 导入插件：

   import 'package:eo_country_picker/eo_country_picker.dart';
   

2. 定义主应用：

   void main() {
     runApp(const MainApp());
   }
   
   class MainApp extends StatelessWidget {
     const MainApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return const MaterialApp(
         home: Example(),
       );
     }
   }
   

3. 定义示例页面：

   class Example extends StatefulWidget {
     const Example({super.key});
   
     @override
     State<Example> createState() => _ExampleState();
   }
   

4. 实现状态管理：

   class _ExampleState extends State<Example> {
     Country? _selectedCountry;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: Column(
             mainAxisSize: MainAxisSize.min,
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               // 显示选中的国家信息
               if (_selectedCountry != null)
                 Padding(
                   padding: const EdgeInsets.all(16.0),
                   child: Text(_selectedCountry.toString()),
                 ),
               // 按钮用于打开国家选择器
               FilledButton(
                 onPressed: () async {
                   final result = await CountryPicker.open(context: context);
                   if (result != null) {
                     setState(() {
                       _selectedCountry = result;
                     });
                   }
                 },
                 child: const Text("Pick a Country"),
               ),
             ],
           ),
         ),
       );
     }
   }