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

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

描述

flutter_simple_country_picker 是一个用于提供易于使用的国家选择小部件的Flutter包。它允许用户从包含多个国家的列表中选择一个国家，从而轻松地将国家选择功能集成到您的Flutter应用中。该插件支持Android、iOS和Web平台，并提供了字体和样式的自定义选项。

开始使用

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

dependencies:
  flutter_simple_country_picker: <version>

然后运行flutter pub get来获取新的依赖项。

安装

在您的dart文件中导入库：

import 'package:flutter_simple_country_picker/flutter_simple_country_picker.dart';

示例

在您的应用中，您需要在MaterialApp的localizationsDelegates中添加CountriesLocalization.delegate。设置支持的语言为'ru'和'en'：

MaterialApp(
  locale: const Locale('ru'), // 可以设置为 'en'
  supportedLocales: const [
    Locale('ru'),
    Locale('en'),
  ],
  localizationsDelegates: [
    GlobalCupertinoLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    CountriesLocalization.delegate,
  ],
  home: HomePage(),
);

使用showCountryPicker函数来显示国家选择器：

showCountryPicker(
  context: context,
  exclude: ['RU', 'EN'], // 排除某些国家
  onDone: () {
    print('CountryPicker dismissed');
  },
  onSelect: (Country country) {
    print('Selected country: ${country.displayName}');
  },
);

showCountryPicker函数的可选参数

参数 描述
exclude 要从列表中排除的国家列表。
filter 用于过滤国家列表的国家列表。
favorite 显示在列表顶部的国家列表。
showPhoneCode 在国家名称前显示电话区号。
showWorldWide 在列表开始处显示“全球”选项。
useAutofocus 加载选择器时自动打开键盘。
showSearch 启用或禁用搜索栏。
isDismissible 允许用户通过滑动关闭模态框。
isScrollControlled 控制模态窗口的滚动行为。
useHaptickFeedback 启用触觉反馈。
useSafeArea 启用模态窗口的安全区域。
onSelect 当用户选择一个国家时的回调。
onDone 当国家选择器被关闭时（无论是否选择了国家）的回调。

所有国家列表

要查看完整的国家列表，请参阅所有国家列表。

更多示例

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

import 'package:example/src/common/constant/constants.dart';
import 'package:example/src/common/localization/localization.dart';
import 'package:example/src/common/util/app_zone.dart';
import 'package:example/src/common/util/country_picker_state_mixin.dart';
import 'package:example/src/common/widget/app.dart';
import 'package:example/src/common/widget/common_header.dart';
import 'package:example/src/common/widget/common_padding.dart';
import 'package:example/src/common/widget/common_space_box.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_simple_country_picker/flutter_simple_country_picker.dart';

/// This file includes basic example for [CountryPhoneInput]
/// that uses of [CountryPicker].
///
/// For more platform examples (android, ios, macOS, web, windows) check on
/// [GitHub](https://github.com/ziqq/flutter_simple_country_picker/tree/master/example/lib/src/preview)
void main() => appZone(() async => runApp(const App(home: Preview())));

/// {[@template](/user/template) county_picker_preview}
/// Preview widget.
/// {[@endtemplate](/user/endtemplate)}
class Preview extends StatefulWidget {
  /// {[@macro](/user/macro) county_picker_preview}
  const Preview({super.key});

  /// Title of the widget.
  static const String title = 'Preview';

  [@override](/user/override)
  State<Preview> createState() => _MobilePreviewState();
}

/// State for [Preview].
class _MobilePreviewState extends State<Preview> with CountryPickerPreviewStateMixin {
  final ValueNotifier<String> _countryPhoneController = ValueNotifier('');

  [@override](/user/override)
  void dispose() {
    _countryPhoneController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: const CommonHeader(title: Preview.title),
        body: SafeArea(
          child: Padding(
            padding: CommonPadding.of(context),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CountryPhoneInput(
                  key: const ValueKey<String>('country_phone_input'),
                  filter: kFilteredCountries,
                  controller: _countryPhoneController,
                ),
                const SizedBox(height: kDefaultPadding),

                // --- 密码输入 --- //
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: CupertinoDynamicColor.resolve(
                      CupertinoColors.secondarySystemBackground,
                      context,
                    ),
                    borderRadius: const BorderRadius.all(Radius.circular(10)),
                  ),
                  child: ConstrainedBox(
                    constraints: const BoxConstraints(minHeight: 56),
                    child: Center(
                      child: TextFormField(
                        decoration: InputDecoration(
                          hintStyle: Theme.of(context).textTheme.bodyLarge,
                          hintText: ExampleLocalization.of(context).passwordLable,
                          border: InputBorder.none,
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: kDefaultPadding,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: kDefaultPadding * 2),

                // --- 提交按钮 --- //
                SizedBox(
                  width: double.infinity,
                  child: CupertinoButton.filled(
                    padding: const EdgeInsets.symmetric(
                      horizontal: kDefaultPadding,
                    ),
                    onPressed: onSubmit,
                    child: const Text('提交'),
                  ),
                ),
                const SizedBox(height: kDefaultPadding * 2),

                SizedBox(
                  width: double.infinity,
                  child: CupertinoButton.filled(
                    key: const ValueKey<String>('full_picker_button'),
                    padding: const EdgeInsets.symmetric(
                      horizontal: kDefaultPadding,
                    ),
                    onPressed: () => showCountryPicker(
                      context: context,
                      // 可以用来排除一个或多个国家
                      // 从国家列表中。可选。
                      exclude: ['KN', 'MF'],
                      favorite: ['RU'],
                      // 在国家名称前显示电话区号。可选。
                      showPhoneCode: true,
                      onSelect: onSelect,
                    ),
                    child: const Text('显示完整选择器'),
                  ),
                ),
                const SizedBox(height: kDefaultPadding),
                SizedBox(
                  width: double.infinity,
                  child: CupertinoButton.filled(
                    key: const ValueKey<String>('filtered_picker_button'),
                    padding: const EdgeInsets.symmetric(
                      horizontal: kDefaultPadding,
                    ),
                    onPressed: () => showCountryPicker(
                      context: context,
                      isScrollControlled: false,
                      // 可以用来排除一个或多个国家
                      // 从国家列表中。可选。
                      filter: kFilteredCountries,
                      // 在国家名称前显示电话区号。可选。
                      showPhoneCode: true,
                      onSelect: onSelect,
                    ),
                    child: const Text('显示筛选选择器'),
                  ),
                ),

                // --- 空白 --- //
                const CommonSpaceBox(),
              ],
            ),
          ),
        ),
      );
}

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

1 回复

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


flutter_simple_country_picker 是一个用于 Flutter 应用程序的简单国家选择器插件。它允许用户从列表中选择一个国家，并返回所选国家的相关信息。以下是如何使用该插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_simple_country_picker: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_simple_country_picker 包：

import 'package:flutter_simple_country_picker/flutter_simple_country_picker.dart';

3. 使用国家选择器

你可以使用 CountryPicker 小部件来显示国家选择器。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CountryPickerExample(),
    );
  }
}

class CountryPickerExample extends StatefulWidget {
  @override
  _CountryPickerExampleState createState() => _CountryPickerExampleState();
}

class _CountryPickerExampleState extends State<CountryPickerExample> {
  Country? _selectedCountry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _selectedCountry == null
                ? Text('No country selected')
                : Text('Selected Country: ${_selectedCountry!.name}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final country = await showCountryPicker(
                  context: context,
                  showPhoneCode: false, // 是否显示电话区号
                );
                setState(() {
                  _selectedCountry = country;
                });
              },
              child: Text('Select Country'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用程序

运行你的 Flutter 应用程序，你应该会看到一个按钮，点击按钮后会弹出一个国家选择器。选择一个国家后，选中的国家名称将显示在屏幕上。

参数说明

  • showPhoneCode: 是否显示电话区号。
  • onSelect: 当用户选择一个国家时触发的回调函数。
  • countryList: 自定义国家列表。

自定义国家列表

如果你想使用自定义的国家列表，可以通过 countryList 参数传递一个 List<Country>：

final country = await showCountryPicker(
  context: context,
  countryList: [
    Country(name: 'United States', code: 'US'),
    Country(name: 'Canada', code: 'CA'),
    // 添加更多国家
  ],
);
回到顶部