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

发布于 1周前 作者 htzhanglong 来自 Flutter

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

Country picker

pub package

country_picker 是一个Flutter包，用于从国家列表中选择一个国家。

Getting Started

添加依赖

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  country_picker: ^2.0.27

导入库

在您的Dart文件中导入该库：

import 'package:country_picker/country_picker.dart';

显示国家选择器

使用 showCountryPicker 方法来显示国家选择器：

showCountryPicker(
  context: context,
  showPhoneCode: true, // 可选。在国家名称前显示电话区号。
  onSelect: (Country country) {
    print('Select country: ${country.displayName}');
  },
);

国际化支持

为了实现国际化，您需要在应用程序的本地化代理列表中添加 CountryLocalizations.delegate：

MaterialApp(
  supportedLocales: [
    const Locale('en'),
    const Locale('el'),
    const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // 简体中文 'zh_Hans'
    const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // 繁体中文 'zh_Hant'
  ],
  localizationsDelegates: [
    CountryLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  home: HomePage(),
);

参数说明

  • onSelect: 当选择了一个国家时调用。国家选择器将新值传递给回调函数（必需）。
  • onClosed: 当关闭国家选择器时调用，无论是否选择了国家（可选）。
  • showPhoneCode: 是否在国家名称前显示电话区号（可选）。
  • searchAutofocus: 是否初始展开虚拟键盘（可选）。
  • showSearch: 是否显示/隐藏搜索栏（可选）。
  • showWorldWide: 是否在列表开头显示"World Wide"选项（可选）。
  • favorite: 在列表顶部显示喜欢的国家（可选）。
  • moveAlongWithKeyboard: 是否在文本框聚焦时移动底部弹出层以适应键盘（可选）。
  • countryListTheme: 自定义国家列表的样式（可选）。
  • exclude: 从国家列表中排除一个或多个国家（可选）。
  • countryFilter: 过滤国家列表（可选），不能同时提供 exclude 和 countryFilter。

自定义主题示例

showCountryPicker(
  context: context,
  countryListTheme: CountryListThemeData(
    flagSize: 25,
    backgroundColor: Colors.white,
    textStyle: TextStyle(fontSize: 16, color: Colors.blueGrey),
    bottomSheetHeight: 500, // 可选。设置国家列表模态框的高度
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.circular(20.0),
    ),
    inputDecoration: InputDecoration(
      labelText: 'Search',
      hintText: 'Start typing to search',
      prefixIcon: const Icon(Icons.search),
      border: OutlineInputBorder(
        borderSide: BorderSide(
          color: const Color(0xFF8C98A8).withOpacity(0.2),
        ),
      ),
    ),
  ),
  onSelect: (Country country) => print('Select country: ${country.displayName}'),
);

排除某些国家示例

showCountryPicker(
  context: context,
  exclude: <String>['KN', 'MF'], // 提供国家代码(iso2)列表
  onSelect: (Country country) => print('Select country: ${country.displayName}'),
);

示例代码

下面是一个完整的示例代码，展示了如何在一个简单的Flutter应用中使用 country_picker 插件：

import 'package:country_picker/country_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo for country picker package',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      supportedLocales: [
        const Locale('en'),
        const Locale('ar'),
        const Locale('es'),
        const Locale('de'),
        const Locale('fr'),
        const Locale('el'),
        const Locale('et'),
        const Locale('nb'),
        const Locale('nn'),
        const Locale('pl'),
        const Locale('pt'),
        const Locale('ru'),
        const Locale('hi'),
        const Locale('ne'),
        const Locale('uk'),
        const Locale('hr'),
        const Locale('tr'),
        const Locale('lv'),
        const Locale('lt'),
        const Locale('ku'),
        const Locale('nl'),
        const Locale('it'),
        const Locale('ko'),
        const Locale('ja'),
        const Locale('id'),
        const Locale('cs'),
        const Locale('ht'),
        const Locale('sk'),
        const Locale('ro'),
        const Locale('bg'),
        const Locale('ca'),
        const Locale('he'),
        const Locale('fa'),
        const Locale('da'),
        const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // 简体中文 'zh_Hans'
        const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // 繁体中文 'zh_Hant'
      ],
      localizationsDelegates: [
        CountryLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo for country picker')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showCountryPicker(
              context: context,
              exclude: <String>['KN', 'MF'],
              favorite: <String>['SE'],
              showPhoneCode: true,
              onSelect: (Country country) {
                print('Select country: ${country.displayName}');
              },
              moveAlongWithKeyboard: false,
              countryListTheme: CountryListThemeData(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(40.0),
                  topRight: Radius.circular(40.0),
                ),
                inputDecoration: InputDecoration(
                  labelText: 'Search',
                  hintText: 'Start typing to search',
                  prefixIcon: const Icon(Icons.search),
                  border: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: const Color(0xFF8C98A8).withOpacity(0.2),
                    ),
                  ),
                ),
                searchTextStyle: TextStyle(
                  color: Colors.blue,
                  fontSize: 18,
                ),
              ),
            );
          },
          child: const Text('Show country picker'),
        ),
      ),
    );
  }
}

通过以上步骤和示例代码，您可以轻松地在Flutter项目中集成并使用 country_picker 插件。如果您有任何问题或需要进一步的帮助，请随时提问！


更多关于Flutter国家选择器插件country_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter国家选择器插件country_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用country_picker插件来实现国家选择器的代码示例。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加country_picker的依赖：

dependencies:
  flutter:
    sdk: flutter
  country_picker: ^2.0.0  # 请根据需要选择最新版本

2. 导入插件

在你需要使用国家选择器的Dart文件中，导入该插件：

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

3. 使用CountryPicker

以下是一个完整的示例，展示如何在Flutter应用中实现一个简单的国家选择器：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Country Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? selectedCountryCode;
  String? selectedCountryName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country Picker Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Selected Country:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8),
            if (selectedCountryName != null)
              Text(
                '${selectedCountryName!} (${selectedCountryCode!})',
                style: TextStyle(fontSize: 16),
              )
            else
              Text(
                'Please select a country',
                style: TextStyle(fontSize: 16, color: Colors.grey),
              ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                showCountryPicker(
                  context: context,
                  favorite: ['+1', 'cn'], // 可选的，设置初始显示的收藏国家代码
                  onSelect: (Country code) {
                    setState(() {
                      selectedCountryCode = code.code;
                      selectedCountryName = code.name;
                    });
                  },
                  search: true, // 可选的，启用搜索框
                  showFlag: true, // 可选的，显示国旗
                  showCurrency: true, // 可选的，显示货币代码
                  showDialCode: true, // 可选的，显示电话拨号代码
                );
              },
              child: Text('Select Country'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保你已经安装了所有依赖项，然后运行你的Flutter应用：

flutter pub get
flutter run

解释

  • 依赖项：在pubspec.yaml文件中添加了country_picker插件。
  • 导入：在需要使用插件的Dart文件中导入了country_picker和flutter/material。
  • UI：构建了一个简单的Flutter应用，包含一个按钮用于触发国家选择器对话框，以及显示所选国家的名称和代码。
  • 功能：使用showCountryPicker函数显示国家选择器，并通过onSelect回调处理用户选择。

这个示例展示了如何在Flutter中使用country_picker插件来实现国家选择器的基本功能。你可以根据需要进一步自定义和扩展。

回到顶部