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

国家选择器小部件

Country Selector Widget 是一个由 Dart 和 Flutter 编写的国家选择器组件。它支持三种语言（英语、简体中文和繁体中文），实现了懒加载和淡入动画效果。此插件提供了 CountrySelectorWidget 和 showCountrySelectorBottomSheet 来满足不同的需求。

支持平台

使用示例

要查看设备或模拟器上的动画示例，请执行以下命令：

cd example/
flutter run

使用方法

要使用此插件，在项目的 pubspec.yaml 文件中添加 country_selector_widget 作为依赖项。

dependencies:
  country_selector_widget: ^版本号

示例

以下是使用 CountrySelectorWidget 和 showCountrySelectorBottomSheet 的示例。

CountrySelectorWidget 的用法

示例代码

CountrySelectorWidget(
    onSelectedCountry: (Country country) async {
        // 选中国家后的回调函数
    },
)

showCountrySelectorBottomSheet 的用法

示例代码

showCountrySelectorBottomSheet(
    context: context,
    onSelectedCountry: (Country country) async {
        // 选中国家后的回调函数
    };
)

参数说明

国家选择器小部件的演示 - Flutter Web

显示国家选择器底部弹出窗口的演示 - Flutter Web

国家选择器小部件的演示 - Android

国家选择器小部件的演示 - iOS

显示国家选择器底部弹出窗口的演示 - macOS

MIT 许可证

Copyright (c) 2022 hkk97

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

完整示例代码

import 'package:flutter/material.dart';
import 'package:country_selector_widget/country_selector.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Country Selector Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const App(title: 'Country Selector Demo Page'),
    ),
  );
}

class App extends StatelessWidget {
  const App({super.key, required this.title});
  final String title;

  Future<void> showSuccessDialog(
    BuildContext context,
    Country country,
  ) async {
    await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text(
            '[onSelectedCountry]',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          content: Text('${country.toJson()}'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text(
                'Close',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: const Text(
          "Country Selector Widget",
          style: TextStyle(
            color: Colors.black,
          ),
        ),
        actions: [
          GestureDetector(
            onTap: () async {
              // 显示国家选择器底部弹出窗口
              await showCountrySelectorBottomSheet(
                context: context,
                // 启用拨号代码而不是选中圆圈
                withDialCode: true,
                // 设置默认选中的国家
                refCountryCode: "HK",
                onSelectedCountry: (country) async {
                  // 弹出对话框以显示国家对象的信息
                  await showSuccessDialog(
                    context,
                    country,
                  );
                }, onBuilded: (){}, onClosed: (){},
              );
            },
            child: Center(
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 10.0),
                padding: const EdgeInsets.symmetric(
                  vertical: 10.0,
                  horizontal: 10.5,
                ),
                color: Colors.grey.shade200,
                child: const Text(
                  "showBottomSheet",
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          )
        ],
      ),
      body: CountrySelectorWidget(
        // 选择中文语言来标记文本而不是英文
        selectedLocale: SelectedLocale.zhCH,
        // 设置默认选中的国家
        refCountryCode: "hk",
        // 选中国家的回调函数
        onSelectedCountry: (country) async {
          // 弹出对话框以显示国家对象的信息
          await showSuccessDialog(
            context,
            country,
          );
        }, onBuilded: (){},
      ),
    );
  }
}